为什么会发生产生跨域问题？
[ 产生跨域的原因 ]
1.浏览器限制
2.跨域(协议，域名，端口任何一个不同)
3.XHR(XMLHttpRequest)请求
也就是说当我们发送的是XMLHttpRequest请求不同的域名，浏览器就会限制访问，那么就会产生跨域问题。
[ 解决跨域问题的思路 ]
1.改动客户端浏览器参数来解除限制 浏览器启动加入
--disable-web-security
2.Jsonp解决是XHR请求的问题.
3.跨域: 被调用方支持跨域，调用方的隐藏请求
跨域问题解决办法
1. JSONP解决跨域
[原理]：
<script>请求不受同源政策限制 ：JSONP动态创建<script>标签，通过<script>函数调用发出请求，返回值是也是js，函数名callback参数的值，函数参数是返回的json对象()
[弊端]：1.只支持Get请求2.发送到不是XHR请求
[jsonp请求实现]
$.ajax({
url: 'url",
dataType: "jsonp",
jsonp: "callback",
cache: true,
success: function(json) {
result = json;
}
});
[jsonp请求实现原理]
//动态创建script标签
function addScriptTag(src) {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag('http://example.com/ip?callback=foo');
}
// 回调函数-获取数据
function foo(data) {
console.log('Your public IP address is: ' + data.ip);
};
2. 跨域解决方案CORS
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
[简单请求-post请求]
解决：被调用放服务端设置Access-Control-Allow-Origin
被调用放服务端设置Access-Control-Allow-Methods
res.addHeader("Access-Control-Allow-Origin", "*") //允许所有域名可以跨域调用
res.addHeader("Access-Control-Allow-Methods", "*") //允许所有请求方式跨域调用
[非简单请求-带cookie的请求]
$.ajax({
type: "get",
url: "url",
xhrFields: {
withCredentials: true
},
success: function(json) {
result = json;
}
});
解决：带cookie时origin必须全匹配， 不能使用 *
被调用放服务端增加设置Access-Control-Allow-Credentials
res.addHeader("Access-Control-Allow-Origin", "localhost:8081")
res.addHeader("Access-Control-Allow-Methods", "*")
res.addHeader("Access-Control-Allow-Credentials", "true") //enable cookie
[非简单请求-带header的请求]
$.ajax({
type: "get",
url: 'url",
headers: {
"x-header1": "AAA"
},
beforeSend: function(xhr) {
xhr.setRequestHeader("x-header2", "BBB")
},
success: function(json) {
result = json;
}
});
解决：带cookie时origin必须全匹配， 不能使用 *
被调用放服务端增加设置Access-Control-Allow-Header
res.addHeader("Access-Control-Allow-Origin", "*")
res.addHeader("Access-Control-Allow-Methods", "*")
res.addHeader("Access-Control-Allow-Header", "content-Type,x-header1,x-header2")
综上所述：
//带cookie的时候，origin必须是全匹配，不能使用*
String origin = req.getHeader("Origin");
if (!org.springframework.util.StringUtils.isEmpty(origin)) {
res.addHeader("Access-Control-Allow-Origin", origin);
}
res.addHeader("Access-Control-Allow-Methods", "*");
// 支持所有自定义头和预检命令(非简单请求会有预检命令)
String headers = req.getHeader("Access-Control-Request-Headers");
if (!org.springframework.util.StringUtils.isEmpty(headers)) {
res.addHeader("Access-Control-Allow-Headers", headers);
}
res.addHeader("Access-Control-Max-Age", "3600");
// enable cookie
res.addHeader("Access-Control-Allow-Credentials", "true");
3. Nginx代理
如果我们请求的时候还是用前端的域名，Nginx帮我们把这个请求转发到真正的后端域名上
[Nginx配置]
server{
# 监听9000端口
listen 9000;
# 域名是localhost
server_name localhost;
#凡是localhost:9000/api这个样子的，都转发到真正的服务端地址http://localhost:9001
location ^~ /api {
proxy_pass http://localhost:9001;
}
}
简单请求&非简单请求
只要同时满足以下两大条件，就属于简单请求,其余属于非简单请求
（1) 请求方法是以下三种方法之一：HEAD、GET、POST
（2）HTTP的头信息不超出以下几种字段（无自定义头）：
Accept Accept-Language Content-Language Last-Event-ID(3)Content-Type：只限于三个值
application/x-www-form-urlencoded multipart/form-data text/plain
码字不易，如果觉得对您有帮助，给个赞给一个小小的鼓励吧 (.)!
网友评论