CORS-跨域资源共享 解决跨域问题
1.什么是跨域?
a.test.com 和 b.test.com 是两个不同的域,而处于安全机制考虑,JS只能访问与所在页面同一个域(相同协议、域名、端口)的内容,但是我们在项目开发时,经常遇到一个页面的js代码,需要去访问另一个服务器上的接口,包括GET,POST,PUT等不同形式请求,这就出现了跨域问题。
2.解决跨域的几种方法。
通过实际项目中涉及到的和网上看到别人用过的,总结一下大概有以下几种方法:
1). document.domain
在主域相同的时候才能使用。
2). iframe
这种方式已经很少见到了,很不优雅,很难控制。
3). JSONP
这种方式应该是有一定的能力处理跨域请求的,但是缺点也十分明显,因为原理是动态创建script标签,通过回调来获取数据,那么就是说它只能处理GET请求。而且对于请求失败的error处理也不好。
4). web socket
H5 新增加的一种浏览器的API。只有在支持web socket协议的服务器上才能正常工作。
var url='ws://www.baidu.com'; //http->ws; https->wss
if ("WebSocket" in window) {
console.log("WebSocket works...");
var ws = new WebSocket(url);
ws.onopen = function() {
// Web Socket is connected, send data using send()
var msg = '{"key": "test","group": "A"}';
ws.send(msg);
console.log("Request to open a connection... Message sent...");
};
ws.onmessage = function(evt) {
var data = evt.data;
// console.log("Message received, and it's...");
console.log(data);
};
ws.onclose = function(e) {
// websocket is closed.
console.log("Connection is closed...");
//console.log(e);
connect();
};
ws.onerror = function(e){
// websocket is error.
console.log("Connection is error...");
//console.log(e);
}
} else {
// The browser doesn't support WebSocket
console.warn("WebSocket NOT supported by your Browser...");
}
5).CORS
这么多解决方法中目前最方便有效的就是这种,CORS。
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing),它允许浏览器向跨源服务器,发出XMLHttpRequest
请求,从而克服了AJAX只能同源的限制。
6).在开发中经常用来解决本地跨域的一种方法是配置nginx,再转发到线上或者测试服务器。不知道这种算不算一种方法。
http {
server {
listen 80;
server_name w.dev.test.com w.test.com;
location ~ ^/(api|action|avatar|financing|files)/{
if ($host = "w.test.com"){
proxy_pass "https://www.test.com";
}
if ($host = "w.dev.test.com"){
proxy_pass "http://dev.test.com";
}
}
location /{ ... }
}
}
3.CORS 详解:
CORS实现起来很简单,但是需要浏览器和服务器同时支持,也就是说服务器需要配置允许你跨域请求,浏览器也需要支持你能够跨域去请求资源。目前大部分浏览器都能够支持。
1). 服务器端配置:
Access-Control-Allow-Origin: <origin> | * // 授权的源控制
Access-Control-Max-Age: <delta-seconds> // 授权的时间
Access-Control-Allow-Credentials: true | false // 控制是否开启与Ajax的Cookie提交方式
Access-Control-Allow-Methods: <method>[, <method>]* // 允许请求的HTTP Method
Access-Control-Allow-Headers: <field-name>[, <field-name>]* // 控制哪些header能发送真正的请求
response headers中与CORS请求相关的字段,都以Access-Control-
开头。
(1)Access-Control-Allow-Origin 该字段是必须的。它的值要么是请求时Origin
字段的值,要么是一个*
,表示接受任意域名的请求。
(2)Access-Control-Allow-Credentials 该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true
,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true
,如果服务器不要浏览器发送Cookie,删除该字段即可。
(3)Access-Control-Allow-Headers 如果浏览器请求包括Access-Control-Request-Headers
字段,则Access-Control-Allow-Headers
字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段。
(4)Access-Control-Allow-Methods 该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。测试中发现,如果浏览器请求中没有Access-Control-Request-Method字段,此字段可不设置。
(5)Access-Control-Max-Age 该字段可选,用来指定本次预检请求的有效期,单位为秒。
***需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin
就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie
也无法读取服务器域名下的Cookie。
2). 前端
如果前端不做任何特殊设置,正常请求跨域的域名接口是可以的,但是只能是GET,且不带有cookie。
如果想要在request headers中带有cookie就要进行特殊的设置。
jQuery:
$.ajax("www.cros.com/api/data", {
type: "GET",
xhrFields: {
withCredentials: true
},
success: function(data, status, xhr) {}
});
angularJs:
$http.post(url, {withCredentials: true, ...})
// 或者
$http({withCredentials: true, ...}).post(...)
// 或者
.config(function ($httpProvider) {
$httpProvider.defaults.withCredentials = true;
}
经过测试法相,jQuery中无论是GET请求还是POST请求,在请求头中是不会加上Access-Control-Request-Headers字段的,也就是说这样jQuery不需要服务器设置Access-Control-Allow-Headers。可以看到只有Host显示是跨域请求,其他的和同域没什么区别。
但是在angularJs中是不一样的,GET请求基本差不多
但是POST请求是会加上 Access-Control-Allow-Methods和Access-Control-Allow-Headers。
这时如果服务器没有设置Access-Control-Allow-Headers,就会请求失败。
参考:http://www.cnblogs.com/JChen666/p/3399951.html