####[ 产生跨域的原因 ]
1.浏览器限制
2.跨域(协议,域名,端口任何一个不同)
3.XHR(XMLHttpRequest)请求
也就是说当我们发送的是XMLHttpRequest请求不同的域名,浏览器就会限制访问,那么就会产生跨域问题。
####[ 解决跨域问题的思路 ]
1.改动客户端浏览器参数来解除限制 浏览器启动加入
--disable-web-security
2.Jsonp解决是XHR请求的问题.
3.跨域: 被调用方支持跨域,调用方的隐藏请求
##跨域问题解决办法
[原理]:
请求不受同源政策限制 :JSONP动态创建
标签,通过
函数调用发出请求,返回值是也是js,函数名callback参数的值,函数参数是返回的json对象()
[弊端]:1.只支持Get请求2.发送到不是XHR请求
$.ajax({
url: 'url",
dataType: "jsonp",
jsonp: "callback",
cache: true,
success: function(json) {
result = json;
}
});
//动态创建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);
};
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
解决:被调用放服务端设置Access-Control-Allow-Origin
被调用放服务端设置Access-Control-Allow-Methods
res.addHeader("Access-Control-Allow-Origin", "*") //允许所有域名可以跨域调用
res.addHeader("Access-Control-Allow-Methods", "*") //允许所有请求方式跨域调用
$.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
$.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");
如果我们请求的时候还是用前端的域名,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
码字不易,如果觉得对您有帮助,给个赞给一个小小的鼓励吧 (.)!