ajax跨域问题全面解决方案

本文为学习慕课网 晓风轻老师 的教程后自行编辑，仅作为本人日后复习翻阅。

1.为什么会发生AJAX跨域？
浏览器限制 (跨域问题是浏览器在前台做的校验，和后台没有关系)
跨域 (请求客户端为localhost：8080，服务端为：localhost:8081)
XHR(XMLHttpRequest)请求

2.解决思路：
浏览器 — 指定参数让浏览器不做校验可解决，但是需要每个请求的人都改动，并且发生在客户端，所以通过这个思路解决 跨域问题的意义不大！

XHR(XMLHttpRequest) — JSONP方式解决，即将请求用JSONP(动态创建script)包装，使之不是XHR请求即可，但是 JSONP解决方案有很多弊端，无法满足现在的很多开发要求，所以JSONP使用越来越少！
用例：
前台：增加一个dataType："jsonp"
$.ajax({ url: "http://localhost:8080/test/get1", dataType: "jsonp", success: function (json) { console.log(json) } });

后台：新增一个切面

import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;

@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {

    public JsonpAdvice() {
        super("callback");
    }
}

控制台截图：

注意：
1、jsonp请求时的type为script
2、中的&_=1519。。。为防止请求被缓存，如果请求可以被缓存，可在前台请求是加入cache: true表示结果可以被缓存。

jsonp的弊端：
1.服务器需要改动代码支持；
2.只支持GET；
3.发送的不是XHR请求；(所以无法支持异步、事件等新特性)

跨域 — 被调用方：支持跨域； 调用方： 隐藏跨域。
被调用方解决： 支持跨域
1.服务器实现 — Filter解决方案
浏览器是先执行还是先判断？—先执行后判断(并不是所有请求都是这样)
新增一个Filter：

编写Filter中的代码：(注意 res.addHeader(“Access-Control-Allow-Origin”, “*”); 并不是适用所有场景)

简单请求和非简单请求

简单请求：先执行后判断
非简单请求：先发送一个OPTIONS预检命令，检查通过后再把跨域请求发送出去,代码改造即在Filter中加入：res.addHeader("Access-Control-Allow-Headers", "Content-Type");

错误：response to preflight request doesn’t pass acess control check:It does not have HTTP ok status
解决方案：

        if(request.getMethod().equals(RequestMethod.OPTIONS.name())) {
            response.setStatus(HttpStatus.OK.value());
            return;
        }

OPTIONS预检命令缓存：在Filter中加入res.addHeader("Access-Control-Max-Age", "3600");值为数字，单位秒；

带Cookie的跨域： 在被调用方加cookie，因为网络请求中只能读取本域的cookie。

"Access-Control-Allow-Origin", "*"  不能满足带cookie的请求

带cookie的请求需要Origin进行全匹配，不能使用"*"，另外需要在Filter中加入res.addHeader("Access-Control-Allow-Credentials", "true");
为满足所有请求的Origin都通用，可以在Filter中做如下代码修改：

 HttpServletRequest req = (HttpServletRequest)servletRequest;
 String origin = req.getHeader("Origin");
 if(!StringUtils.isEmpty(origin)){
     res.addHeader("Access-Control-Allow-Origin", origin);
 }

**带自定义头的跨域：**同理带cookie的跨域；

2.Nginx 配置
在ngnix.conf里面最后加上：
在新建的vhost文件夹下新增一个.conf文件，里面内容如下：

注意：if后面必须带有一个空格

检测nginx 中编写的代码是否正确：nginx .exe -t
启动nginx ： start nginx .exe
停止nginx : nginx -s stop
重新载入nginx : nginx .exe -s reload

3.Apache配置： 略(原理同Nginx)

如果是Spring框架，其自带解决跨域问题的注解 ： @CrossOrigin ,可以加在Controller或具体Method上面，就能直接解决该Controller或Method的跨域问题。

调用方解决：隐藏跨域
1.Nginx 配置
在新建的vhost文件夹下新增一个.conf文件，里面内容如下：

2.Apache配置： 略(原理同Nginx)