【免费】JSONP跨域请求资源-CSDN文库

需积分: 0 113 浏览量更新于2020-10-20 收藏 48KB PDF 举报

JSONP跨域请求是一种常用的前端技术，用以解决由于浏览器同源策略限制而导致的跨域访问问题。同源策略是指在Web浏览器中，为了保证用户信息的安全，浏览器对脚本能够访问的页面范围进行了限制。一般来说，如果两个页面的协议、域名、端口都相同，则这两个页面具有相同的源。如果两个页面不符合以上任何一个相同的条件，则它们属于不同的源，即使它们在同一个服务器上也不能互相访问。当一个网页尝试访问另一个不同源的服务器上的资源时，就会发生跨域请求。由于安全原因，浏览器的同源策略会阻止这种请求，但是由于HTML的<script>标签不受此限制，因此可以利用这一点来实现跨域通信。JSONP正是基于这种原理工作的。 JSONP（JSON with Padding）是一种使用模式，它允许用户在不同域之间进行数据交换。JSONP的原理是动态地创建一个<script>标签，并将需要请求的URL作为<script>的src属性值，URL中需要包含一个回调函数的名称。当页面加载这个<script>标签时，浏览器会发起一个跨域请求到指定的URL。服务器返回的响应内容必须是一个调用之前定义好的回调函数，并将数据作为参数传递给这个函数的JavaScript代码。由于返回的内容是执行的JavaScript代码，而不是JSON数据，因此JSONP请求不使用HTTP头中的Content-Type：application/json，而是在<script>标签的src属性中发起。这种请求方式的缺点是只能进行GET请求，而且因为是执行脚本，所以安全性相对于其他类型的跨域请求较低。在实际应用中，JSONP的使用有以下步骤： 1. 在客户端定义一个回调函数，该函数会处理从服务器返回的数据。 2. 创建一个<script>元素，并将需要请求的URL赋值给它的src属性，URL中包含回调函数的名称。 3. 将<script>元素插入到HTML文档的<head>或<body>部分中，以便浏览器加载并执行返回的脚本。 4. 服务器接收到请求后，构造一个函数调用的字符串作为响应返回。 5. 客户端页面中的回调函数被调用，处理返回的数据。例如，使用jQuery来实现JSONP请求的方式如下： ```javascript $.ajax({ url: "***", type: "GET", dataType: "jsonp", // 指定请求类型为jsonp jsonp: "callback", // 这里的callback是参数名，实际发送到服务端的参数名由服务端的逻辑来决定 success: function(data) { console.log(data); } }); ``` 服务端需要接收callback参数，并在返回数据时调用该回调函数： ```java // 假设使用Spring MVC框架 @RequestMapping("/data") public void handleRequest(@RequestParam("callback") String callback, HttpServletResponse response) { String data = "{\"name\": \"value\"}"; response.setContentType("text/javascript"); PrintWriter out = response.getWriter(); out.println(callback + "(" + data + ");"); } ``` 以上客户端代码会发送一个请求到服务器，并期待返回一段带有函数调用的JavaScript代码，比如： ``` myFunction({"name": "value"}); ``` 这样，myFunction函数就会被调用，并处理返回的JSON数据。需要注意的是，由于JSONP本质上是一种script请求，它不能发送请求体（即 POST 请求的数据），所以只能用于GET请求。同时，由于脚本执行的特性，JSONP请求对数据传输的安全性和完整性无法进行充分的校验。因此，在使用JSONP时，需要对数据来源进行充分的信任，或者采用其他安全机制来保证数据的安全传输。

资源推荐

资源评论