1.什么是跨域？
和 是两个不同的域，而处于安全机制考虑，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://'; //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{
listen80;
server_name w.;
location~^/(api|action|avatar|financing|files)/{
if($host=""){
proxy_pass"";
}
if($host="w."){
proxy_pass"";
}
}
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("/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，就会请求失败。
参考：/JChen666/p/3399951.html
/blog//04/cors.html
/blogshi/blog/303758
