Ajax跨域访问解决方案

JS跨域请求

        这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

        举个栗子：在A网站中，我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。 你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的。跨域访问违反了同源策略， 同源策略规定，浏览器的ajax只能访问跟它的HTML页面同源（相同域名或IP）的资源。

跨域解决方案CORS

        CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

        它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

        请求过程如下图:

        

Preflight Request：

        

        然后服务器端给我们返回一个Preflight Response

        

        CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。另一方面，开发者必须在AJAX请求中打开withCredentials属性。否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

        springMVC的版本在4.2或以上版本，可以使用注解实现跨域, 我们只需要在需要跨域的方法上添加注解@CrossOrigin即可

        @CrossOrigin(origins="http://localhost:9105",allowCredentials="true")  allowCredentials="true"  可以缺省

传统方式

 
二、什么是JSONP
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
 
由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script>
 元素是一个例外。利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的JSONP。
用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。更具体的原理需要
更多篇幅的讲解，小伙伴可以自行去百度。
 
三、JSONP的使用
前端的使用示例
JQuery Ajax对JSONP进行了很好的封装，我们使用起来很方便。前端示例：
 
    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });
 
需要注意的地方是：
 
dataType，该参数必须要设置成jsonp
jsonp，该参数的值需要与服务器端约定，详细情况下面介绍。（约定俗成的默认值为callback）
后端的配合示例
JQuery Ajax Jsonp原理
后端要配合使用jsonp，那么首先得了解Jquery Ajax jsonp的一个特点： 
Jquery在发送一个Ajax jsonp请求时，会在访问链接的后面自动加上一个验证参数，这个参数是Jquery随机生成的，例如链接 
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046 
中，参数callback=jQuery31106628680598769732_1512186387045&_=1512186387046就是jquery自动添加的。 
添加这个参数的目的是唯一标识这次请求。当服务器端接收到该请求时，需要将该参数的值与实际要返回的json值进行构造（如何构造下面
讲解），并且返回，而前端会验证这个参数，如果是它之前发出的参数，那么就会接收并解析数据，如果不是这个参数，那么就拒绝接受。 
需要特别注意的是这个验证参数的名字（我在这个坑上浪费了2小时），这个名字来源于前端的jsonp参数的值。如果把前端jsonp参数的值改
为“aaa”，那么相应的参数就应该是 aaa=jQuery31106628680598769732_1512186387045&_=1512186387046
 
后端接收与处理
知道了Jquery Ajax Jsonp的原理，也知道了需要接受的参数，我们就可以来编写服务器端程序了。 
为了配合json，服务器端需要做的事情可以概括为两步：
 
第一步、接收验证参数
根据与前端Ajax约定的jsonp参数名来接收验证参数，示例如下（使用SpringMVC，其他语言及框架原理类似）
 
    @ResponseBody
    @RequestMapping("/getJsonp")
    public String getMySeatSuccess(@RequestParam("callback") String callback){
 
第二步、构造参数并返回
将接收的的验证参数callback与实际要返回的json数据按“callback(json)”的方式构造：
 
     @ResponseBody
    @RequestMapping("/getMySeat")
    public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson();   //google的一个json工具库
        Map<String,String> map=new HashMap<>();
        map.put("seat","1_2_06_12");
        return callback+"("+gson.toJson(map)+")";   //构造返回值
    }
 
四、总结
最终，前后端的相应代码应该是这样的： 
前端
 
    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });
 
后端
 
    @ResponseBody
    @RequestMapping("/getMySeat")
    public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson();
        Map<String,String> map=new HashMap<>();
        map.put("seat","1_2_06_12");
        logger.info(callback);
        return callback+"("+gson.toJson(map)+")";
    }
 
需要注意的是：
 
前端注意与后端沟通约定jsonp的值，通常默认都是用callback。
后端根据jsonp参数名获取到参数后要与本来要返回的json数据按“callback(json)”的方式构造。
如果要测试的话记得在跨域环境（两台机器）下进行。
完整的示例就是上面两段代码，这里就不提供Github连接了。上面的示例亲测有效，如果有遇到问题的，欢迎留言提问。
 
原文：https://blog.csdn.net/zhoucheng05_13/article/details/78694766?utm_source=copy