JSONP跨域解决方案：原理详解及SpringMVC实战代码

跨域概念与JSONP定义

跨域的概念解析：

1、域名存在差异

2、域名一致但端口号不同

出于安全机制的考量，JavaScript默认禁止跨域请求。为了解决这一限制，可以采用JSONP技术。

一、JSONP的基本定义

JSONP（JSON with Padding）是JSON的一种特定使用模式，旨在解决主流浏览器中的跨域数据访问障碍。受限于同源策略，通常位于 server1.example.com 的网页脚本无法与非 server1.example.com 的服务器进行通信。然而，HTML中的 <script> 元素是一个例外。利用 <script> 标签的这一开放特性，网页能够获取来自其他来源的动态生成的 JSON 数据，这种模式即被称为 JSONP。通过 JSONP 获取的数据并非纯粹的 JSON 格式，而是任意格式的 JavaScript 代码，由 JavaScript 解释器直接执行，而非使用 JSON 解析器进行解析。

核心原理：浏览器在发起 JavaScript 请求时，允许通过 <script> 标签的 src 属性进行跨域请求。可以在请求结果中嵌入回调方法名，并在请求页面中预先定义该方法，从而获取跨域请求的数据。（此时 JavaScript 请求的不是单纯的 JSON 数据，而是一段包含 JSON 数据的 JavaScript 脚本）。

跨域概念与JSONP定义

JSONP原理与模拟演示

二、JSONP 模拟演示

服务器域名：http://localhost:8081/rest/itemcat/list

客户端服务器地址：http://localhost:8082/test.html

1、常规 JavaScript 跨域请求

服务器返回数据：

跨域概念与JSONP定义

客户端发起请求的代码：


$(function(){
  $.ajax(    {url: "http://localhost:8081/rest/itemcat/list?callback=myFunction", 
     success: function(data){
      console.info(data)
   }}); 
 });

执行结果


XMLHttpRequest cannot load http://localhost:8081/rest/itemcat/list?callback=myFunction. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.

2、模拟 JSONP 请求方式

客户端发起请求的代码：


$(function(){
  greateScript("http://localhost:8081/rest/itemcat/list");
  function greateScript(src) {
   $("<script><//script>").attr("src", src).appendTo("body")
  } 
 });

执行结果：

list?_=1488425374097:1 Uncaught SyntaxError: Unexpected token :

SpringMVC环境下的JSONP实现

三、实际使用 JSONP

运行环境：

服务器域名：http://localhost:8081/rest/itemcat/list

客户端服务器地址：http://localhost:8082/test.html

服务端代码实现（基于 springmvc4）：


@RequestMapping("/itemcat/list")
 @ResponseBody
 public Object getItemCatList(String callback) {
  CatResult catResult = itemCatService.getItemCatList();
  MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
  //设置JSONP回调函数
  mappingJacksonValue.setJsonpFunction(callback);
  return mappingJacksonValue;
 }

客户端调用代码：


$(function(){
  $.ajax(
   { url: "http://localhost:8081/rest/itemcat/list", 
    dataType: "jsonp",
    jsonp: "callback",
    success: function(data){
    console.info(data)
   }}); 
 });

执行结果：

跨域概念与JSONP定义

观察返回结果可以发现，返回的数据并非单纯的 JSON 数据，而是一段 JavaScript 函数调用。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！

JSONP跨域请求原理与SpringMVC实现

跨域概念与JSONP定义

JSONP原理与模拟演示

SpringMVC环境下的JSONP实现

实用工具推荐