一、跨域
??跨域即是当前的 web 应用访问了不属于当前 web 应用的接口资源时，浏览器的对资源的一种保护作用。
Failed to load http://localhost:8080/test: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:8020' is therefore not allowed access.
??原因是服务端响应的响应头没有告诉浏览器，该资源不允许被跨域调用。
??跨域是浏览器的一种安全保护机制，后台之间相互调用不存在跨域问题。跨域通常有如下几种解决办法。
二、代理
??vue 开发时有一个这样的配置 config/index.js ，这是使用 node.js 的代理功能。即页面请求还是请求本地，本地有一个代理服务将请求代理到目标服务器上。通过这种方式，把原来的前后台跨域调用变为后台与后台之间的跨域调用，由于跨域报错问题只存在浏览器上，后台调用正常进行，所以问题便被解决。
proxyTable: {
'/api': {
target:'http://localhost:8080/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
??在实际开发中，通常也会使用 nginx 的反向代理功能解决跨域问题。
location ^~ / {
proxy_pass http://127.0.0.1:8080/;
}
三、jsonp
??jsonp 的原理是当前 web 应用可以请求其他 web 应用的 JavaScript 脚本资源，如果我们把数据放在。
$.ajax("http://127.0.0.1:8080/test", {
type: "get",
dataType: "jsonp",
success: function (data) {
alert(JSON.stringify(data))
}
})
??使用 jsonp 时浏览器会给当前 html 文件创建一个路径为 jsonp 路径的 js 脚本，浏览器就去请求对应的脚本
window.onload = function () {
addScriptTag('http:/127.0.0.1:8080/test?callback=foo');
}
??请求到的脚本格式如下
foo({
"test": "testData"
});
??数据就包含在一个方法中，jQuery 就能获取到方法中，也就是后台传过来的数据，这种方式是除代理外兼容性最好的解决方案。
四、服务端允许跨域
??满足浏览器跨域要求，即在响应头中加入Access-Control-Allow-Origin
response.setHeader("Access-Control-Allow-Origin", "*");
??响应头如下：
??在 spring mvc 中只需要在控制器类上加一个 @CrossOrigin 注解即可解决。
五、携带 cookies 的跨域
??jQuery 的 ajax 携带 cookies 时，使用参数 xhrFields: { withCredentials: true }表示在跨域请求时带上 cookies 凭证。
$.ajax({
type: "post",
url: "http://127.0.0.1:8080/test",
xhrFields: {
withCredentials: true
},
success: function(data) {
alert(data)
}
});
??浏览器报如下错误：
Failed to load http://localhost:8080/test: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*'
when the request's credentials mode is 'include'. Origin 'http://127.0.0.1:8020' is therefore not allowed access.
The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
??大致意思是带 cookies 凭证时Access-Control-Allow-Origin 不能为 *，必须为当前请求的主机，当前的主机在请求头里面有，所以就有。
String origin = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Origin", origin);
??修改后刷新页面发现还在报错
Failed to load http://localhost:8080/test: The value of the 'Access-Control-Allow-Credentials' header in the response is ''
which must be 'true' when the request's credentials mode is 'include'. Origin 'http://127.0.0.1:8020' is therefore not allowed access.
The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
??大致意思是跨域请求携带 cookies 凭证时 Access-Control-Allow-Credentials 必须为 true
response.setHeader("Access-Control-Allow-Credentials", "true");
??请求成功，总配置如下
String origin = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Origin", origin);
response.setHeader("Access-Control-Allow-Credentials", "true");
六、携带自定义头的跨域
??当有一些特殊需求如请求头加入一些用户数据时，发现跨域又不能用了，而且发请求前会发送一个类型为Request Method:OPTIONS的预检请求
$.ajax({
type: "post",
url: "http://localhost:8080/test",
headers: {
'userId': '1'
},
xhrFields: {
withCredentials: true
},
async: true,
success: function(data) {
alert(data)
}
});
??发现跨域又不能用了
Failed to load http://localhost:8080/test: Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:8020' is therefore not allowed access. The response had HTTP status code 403.
??原因是预检时请求头不匹配，只需在拦截器或过滤器里面加入如下即可。
String origin = request.getHeader("Origin");
String header = request.getHeader("Access-Control-Request-Headers");
response.addHeader("Access-Control-Allow-Methods", "*");
response.addHeader("Access-Control-Max-Age", "600");//预检请求的结果缓存10分钟
response.addHeader("Access-Control-Allow-Origin", origin);
response.addHeader("Access-Control-Allow-Credentials", "true");
response.addHeader("Access-Control-Allow-Headers", header);