跨域资源共享 CORS 详解

时间 2019-11-22

标签资源共享 cors 详解繁體版

原文原文链接

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。javascript

它容许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。css

本文详细介绍CORS的内部机制。html

1、简介

CORS须要浏览器和服务器同时支持。目前，全部浏览器都支持该功能，IE浏览器不能低于IE10。前端

整个CORS通讯过程，都是浏览器自动完成，不须要用户参与。对于开发者来讲，CORS通讯与同源的AJAX通讯没有差异，代码彻底同样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感受。vue

所以，实现CORS通讯的关键是服务器。只要服务器实现了CORS接口，就能够跨源通讯。html5

2、两种请求

浏览器将CORS请求分红两类：简单请求（simple request）和非简单请求（not-so-simple request）。java

只要同时知足如下两大条件，就属于简单请求。node

（1) 请求方法是如下三种方法之一：jquery

HEAD

GET

POST

（2）HTTP的头信息不超出如下几种字段：webpack

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不一样时知足上面两个条件，就属于非简单请求。

浏览器对这两种请求的处理，是不同的。

3、简单请求

3.1 基本流程

对于简单请求，浏览器直接发出CORS请求。具体来讲，就是在头信息之中，增长一个Origin字段。

下面是一个例子，浏览器发现此次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段。

GET /cors HTTP/1.1
Origin: http://api.bob.com Host: api.alice.com Accept-Language: en-US Connection: keep-alive User-Agent: Mozilla/5.0...

上面的头信息中，Origin字段用来讲明，本次请求来自哪一个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否赞成此次请求。

若是Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误没法经过状态码识别，由于HTTP回应的状态码有多是200。

若是Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

Access-Control-Allow-Origin: http://api.bob.com Access-Control-Allow-Credentials: true Access-Control-Expose-Headers: FooBar Content-Type: text/html; charset=utf-8

上面的头信息之中，有三个与CORS请求相关的字段，都以Access-Control-开头。

（1）Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

（2）Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否容许发送Cookie。默认状况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie能够包含在请求中，一块儿发给服务器。这个值也只能设为true，若是服务器不要浏览器发送Cookie，删除该字段便可。

（3）Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。若是想拿到其余字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')能够返回FooBar字段的值。

3.2 withCredentials 属性

上面说到，CORS请求默认不发送Cookie和HTTP认证信息。若是要把Cookie发到服务器，一方面要服务器赞成，指定Access-Control-Allow-Credentials字段。

Access-Control-Allow-Credentials: true

另外一方面，开发者必须在AJAX请求中打开withCredentials属性。

var xhr = new XMLHttpRequest(); xhr.withCredentials = true;

不然，即便服务器赞成发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

可是，若是省略withCredentials设置，有的浏览器仍是会一块儿发送Cookie。这时，能够显式关闭withCredentials。

xhr.withCredentials = false;

须要注意的是，若是要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其余域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也没法读取服务器域名下的Cookie。

4、非简单请求

4.1 预检请求

非简单请求是那种对服务器有特殊要求的请求，好比请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通讯以前，增长一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可使用哪些HTTP动词和头信息字段。只有获得确定答复，浏览器才会发出正式的XMLHttpRequest请求，不然就报错。

下面是一段浏览器的JavaScript脚本。

var url = 'http://api.alice.com/cors'; var xhr = new XMLHttpRequest(); xhr.open('PUT', url, true); xhr.setRequestHeader('X-Custom-Header', 'value'); xhr.send();

上面代码中，HTTP请求的方法是PUT，而且发送一个自定义头信息X-Custom-Header。

浏览器发现，这是一个非简单请求，就自动发出一个"预检"请求，要求服务器确承认以这样请求。下面是这个"预检"请求的HTTP头信息。

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com Access-Control-Request-Method: PUT Access-Control-Request-Headers: X-Custom-Header Host: api.alice.com Accept-Language: en-US Connection: keep-alive User-Agent: Mozilla/5.0...

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪一个源。

除了Origin字段，"预检"请求的头信息包括两个特殊字段。

（1）Access-Control-Request-Method

该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

（2）Access-Control-Request-Headers

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。

4.2 预检请求的回应

服务器收到"预检"请求之后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段之后，确认容许跨源请求，就能够作出回应。

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT Server: Apache/2.0.61 (Unix) Access-Control-Allow-Origin: http://api.bob.com Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: X-Custom-Header Content-Type: text/html; charset=utf-8 Content-Encoding: gzip Content-Length: 0 Keep-Alive: timeout=2, max=100 Connection: Keep-Alive Content-Type: text/plain

上面的HTTP回应中，关键的是Access-Control-Allow-Origin字段，表示http://api.bob.com能够请求数据。该字段也能够设为星号，表示赞成任意跨源请求。

Access-Control-Allow-Origin: *

若是浏览器否认了"预检"请求，会返回一个正常的HTTP回应，可是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不一样意预检请求，所以触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出以下的报错信息。

XMLHttpRequest cannot load http://api.alice.com. Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

服务器回应的其余CORS相关字段以下。

Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: X-Custom-Header Access-Control-Allow-Credentials: true Access-Control-Max-Age: 1728000

（1）Access-Control-Allow-Methods

该字段必需，它的值是逗号分隔的一个字符串，代表服务器支持的全部跨域请求的方法。注意，返回的是全部支持的方法，而不单是浏览器请求的那个方法。这是为了不屡次"预检"请求。

（2）Access-Control-Allow-Headers

若是浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，代表服务器支持的全部头信息字段，不限于浏览器在"预检"中请求的字段。

（3）Access-Control-Allow-Credentials

该字段与简单请求时的含义相同。

（4）Access-Control-Max-Age

该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即容许缓存该条回应1728000秒（即20天），在此期间，不用发出另外一条预检请求。

4.3 浏览器的正常请求和回应

一旦服务器经过了"预检"请求，之后每次浏览器正常的CORS请求，就都跟简单请求同样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

下面是"预检"请求以后，浏览器的正常CORS请求。

PUT /cors HTTP/1.1
Origin: http://api.bob.com Host: api.alice.com X-Custom-Header: value Accept-Language: en-US Connection: keep-alive User-Agent: Mozilla/5.0...

上面头信息的Origin字段是浏览器自动添加的。

下面是服务器正常的回应。

Access-Control-Allow-Origin: http://api.bob.com Content-Type: text/html; charset=utf-8

上面头信息中，Access-Control-Allow-Origin字段是每次回应都一定包含的。

5、与JSONP的比较

CORS与JSONP的使用目的相同，可是比JSONP更强大。

JSONP只支持GET请求，CORS支持全部类型的HTTP请求。JSONP的优点在于支持老式浏览器，以及能够向不支持CORS的网站请求数据。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

另一篇文章

什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另外一个域下的资源，这里跨域是广义的。

广义的跨域：

1.) 资源跳转： A连接、重定向、表单提交2.) 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操做等

其实咱们一般所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

这篇文章共享以前我还是要引荐下我自个的前端群：657137906，不论你是小白还是大牛，小编我都挺期待，不按期共享干货，包含我自个整理的一份2017最新的前端材料和零根底入门教程，期待初学和进阶中的小伙伴。

什么是同源策略？

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，若是缺乏了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即使两个不一样的域名指向同一个ip地址，也非同源。

同源策略限制如下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 没法读取2.) DOM 和 Js对象没法得到3.) AJAX 请求不能发送

常见跨域场景

URL 说明 是否容许通讯http://www.domain.com/a.jshttp://www.domain.com/b.js 同一域名，不一样文件或路径 容许http://www.domain.com/lab/c.jshttp://www.domain.com:8000/a.jshttp://www.domain.com/b.js 同一域名，不一样端口 不容许 http://www.domain.com/a.jshttps://www.domain.com/b.js 同一域名，不一样协议 不容许 http://www.domain.com/a.jshttp://192.168.4.12/b.js 域名和域名对应相同ip 不容许 http://www.domain.com/a.jshttp://x.domain.com/b.js 主域相同，子域不一样 不容许http://domain.com/c.js http://www.domain1.com/a.jshttp://www.domain2.com/b.js 不一样域名 不容许

跨域解决方案

一、经过jsonp跨域

二、 document.domain + iframe跨域

三、 location.hash + iframe

四、 window.name + iframe跨域

五、 postMessage跨域

六、跨域资源共享（CORS）

七、 nginx代理跨域

八、 nodejs中间件代理跨域

九、 WebSocket协议跨域

1、经过jsonp跨域

一般为了减轻web服务器的负载，咱们把js、css，img等静态资源分离到另外一台独立域名的服务器上，在html页面中再经过相应的标签从不一样域名下加载静态资源，而被浏览器容许，基于此原理，咱们能够经过动态建立script，再请求一个带参网址实现跨域通讯。

1.）原生实现：

<script> var script = document.createElement('script'); script.type ='text/javascript'; // 传参并指定回调执行函数为onBack script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack'; document.head.appendChild(script); // 回调执行函数 function onBack(res) { alert(JSON.stringify(res)); } </script>

服务端返回以下（返回时即执行全局函数）：

onBack({"status": true, "user": "admin"})

2.）jquery ajax：

$.ajax({ url: 'http://www.domain2.com:8080/login', type: 'get',dataType: 'jsonp', // 请求方式为jsonp jsonpCallback: "onBack", // 自定义回调函数名 data: {}});

3.）vue.js：

this.$http.jsonp('http://www.domain2.com:8080/login', { params: {}, jsonp: 'onBack'}).then((res) => { console.log(res);})

后端node.js代码示例：

var querystring = require('querystring');var http = require('http');var server = http.createServer();server.on('request', function(req, res) { var params = qs.parse(req.url.split('?')[1]); var fn = params.callback; // jsonp返回设置 res.writeHead(200, { 'Content-Type': 'text/javascript'}); res.write(fn + '(' + JSON.stringify(params) + ')'); res.end();});server.listen('8080');console.log('Server is running at port 8080...');

jsonp缺点：只能实现get一种请求。

2、 document.domain + iframe跨域

此方案仅限主域相同，子域不一样的跨域应用场景。

实现原理：两个页面都经过js强制设置document.domain为基础主域，就实现了同域。

1.）父窗口：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe><script> document.domain = 'domain.com'; var user = 'admin';</script>

2.）子窗口：(http://child.domain.com/b.html)

<script> document.domain = 'domain.com'; // 获取父窗口中变量 alert('get js data from parent ---> ' + window.parent.user);</script>

3、 location.hash + iframe跨域

实现原理： a欲与b跨域相互通讯，经过中间页c来实现。三个页面，不一样域之间利用iframe的location.hash传值，相同域之间直接js访问来通讯。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不一样域只能经过hash值单向通讯，b与c也不一样域也只能单向通讯，但c与a同域，因此c可经过parent.parent访问a页面全部对象。

1.）a.html：(http://www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html"style="display:none;"></iframe><script> var iframe =document.getElementById('iframe'); // 向b.html传hash值 setTimeout(function() { iframe.src = iframe.src + '#user=admin'; }, 1000); // 开放给同域c.html的回调方法 function onCallback(res) { alert('data from c.html ---> ' + res); }</script>

2.）b.html：(http://www.domain2.com/b.html)

<iframe id="iframe" src="http://www.domain1.com/c.html"style="display:none;"></iframe><script> var iframe =document.getElementById('iframe'); // 监听a.html传来的hash值，再传给c.html window.onhashchange = function () { iframe.src = iframe.src + location.hash; };</script>

3.）c.html：(http://www.domain1.com/c.html)

<script> // 监听b.html传来的hash值 window.onhashchange = function () { // 再经过操做同域a.html的js回调，将结果传回 window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', '')); };</script>

4、 window.name + iframe跨域

window.name属性的独特之处：name值在不一样的页面（甚至不一样域名）加载后依旧存在，而且能够支持很是长的 name 值（2MB）。

1.）a.html：(http://www.domain1.com/a.html)

var proxy = function(url, callback) { var state = 0; var iframe = document.createElement('iframe'); // 加载跨域页面 iframe.src = url; // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name iframe.onload = function() { if (state === 1) { // 第2次onload(同域proxy页)成功后，读取同域window.name中数据 callback(iframe.contentWindow.name); destoryFrame(); } else if (state === 0) { // 第1次onload(跨域页)成功后，切换到同域代理页面 iframe.contentWindow.location ='http://www.domain1.com/proxy.html'; state = 1; } }; document.body.appendChild(iframe); // 获取数据之后销毁这个iframe，释放内存；这也保证了安全（不被其余域frame js访问） function destoryFrame() { iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); }};// 请求跨域b页面数据proxy('http://www.domain2.com/b.html', function(data){ alert(data);});

2.）proxy.html：(http://www.domain1.com/proxy....

中间代理页，与a.html同域，内容为空便可。

3.）b.html：(http://www.domain2.com/b.html)

<script> window.name = 'This is domain2 data!';</script>

总结：经过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操做。

5、 postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数很少能够跨域操做的window属性之一，它可用于解决如下方面的问题：

a.）页面和其打开的新窗口的数据传递

b.）多窗口之间消息传递

c.）页面与嵌套的iframe消息传递

d.）上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数

data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，因此传参时最好用JSON.stringify()序列化。

origin：协议+主机+端口号，也能够设置为"*"，表示能够传递给任意窗口，若是要指定和当前窗口同源的话设置为"/"。

1.）a.html：(http://www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html"style="display:none;"></iframe><script> var iframe =document.getElementById('iframe'); iframe.onload = function() { vardata = { name: 'aym' }; // 向domain2传送跨域数据 iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com'); }; // 接受domain2返回数据 window.addEventListener('message', function(e) { alert('data from domain2 ---> ' + e.data); }, false);</script>

2.）b.html：(http://www.domain2.com/b.html)

<script> // 接收domain1的数据 window.addEventListener('message',function(e) { alert('data from domain1 ---> ' + e.data); var data = JSON.parse(e.data); if (data) { data.number = 16; // 处理后再发回domain1 window.parent.postMessage(JSON.stringify(data),'http://www.domain1.com'); } }, false);</script>

6、跨域资源共享（CORS）

普通跨域请求：只服务端设置Access-Control-Allow-Origin便可，前端无须设置，若要带cookie请求：先后端都须要设置。

需注意的是：因为同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。若是想实现当前页cookie的写入，可参考下文：7、nginx反向代理中设置proxy_cookie_domain 和 8、NodeJs中间件代理中cookieDomainRewrite参数的设置。

目前，全部浏览器都支持该功能(IE8+：IE8/9须要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

一、前端设置：

1.）原生ajax

// 前端设置是否带cookiexhr.withCredentials = true;

示例代码：

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容// 前端设置是否带cookiexhr.withCredentials = true;xhr.open('post','http://www.domain2.com:8080/login',true);xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send('user=admin');xhr.onreadystatechange = function(){ if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); }};

2.）jQuery ajax

$.ajax({ ... xhrFields: { withCredentials: true // 前端设置是否带cookie}, crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie...});

3.）vue框架

在vue-resource封装的ajax组件中加入如下代码：

Vue.http.options.credentials = true

二、服务端设置：

若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。

1.）Java后台：

/** 导入包：import javax.servlet.http.HttpServletResponse;* 接口参数中定义：HttpServletResponse response*/response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 如有端口需写全（协议+域名+端口）response.setHeader("Access-Control-Allow-Credentials", "true");

2.）Nodejs后台示例：

var http = require('http');var server = http.createServer();var qs =require('querystring');server.on('request', function(req, res) { var postData = ''; // 数据块接收中 req.addListener('data', function(chunk) { postData += chunk; }); // 数据接收完毕 req.addListener('end', function(){ postData = qs.parse(postData); // 跨域后台设置 res.writeHead(200, {'Access-Control-Allow-Credentials': 'true', // 后端容许发送Cookie'Access-Control-Allow-Origin': 'http://www.domain1.com', // 容许访问的域（协议+域名+端口） 'Set-Cookie':'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本没法读取cookie }); res.write(JSON.stringify(postData)); res.end(); });});server.listen('8080');console.log('Server is running at port 8080...');

7、 nginx代理跨域

一、 nginx配置解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入如下配置。

location / { add_header Access-Control-Allow-Origin *;}

二、 nginx反向代理接口跨域

跨域原理：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不须要同源策略，也就不存在跨越问题。

实现思路：经过nginx配置一个代理服务器（域名与domain1相同，端口不一样）作跳板机，反向代理访问domain2接口，而且能够顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登陆。

nginx具体配置：

#proxy服务器server { listen 81; server_name www.domain1.com; location / { proxy_pass http://www.domain2.com:8080; #反向代理 proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名 index index.htmlindex.htm; # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用 add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为* add_header Access-Control-Allow-Credentials true; }}

1.) 前端代码示例：

var xhr = new XMLHttpRequest();// 前端开关：浏览器是否读写cookiexhr.withCredentials = true;// 访问nginx中的代理服务器xhr.open('get', 'http://www.domain1.com:81/?user=admin',true);xhr.send();

2.) Nodejs后台示例：

var http = require('http');var server = http.createServer();var qs =require('querystring');server.on('request', function(req, res) { varparams = qs.parse(req.url.substring(2)); // 向前台写cookie res.writeHead(200, { 'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本没法读取 }); res.write(JSON.stringify(params)); res.end();});server.listen('8080');console.log('Server is running at port 8080...');

8、 Nodejs中间件代理跨域

node中间件实现跨域代理，原理大体与nginx相同，都是经过启一个代理服务器，实现数据的转发，也能够经过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登陆认证。

一、非vue框架的跨域（2次跨域）

利用node + express + http-proxy-middleware搭建一个proxy服务器。

1.）前端代码示例：

var xhr = new XMLHttpRequest();// 前端开关：浏览器是否读写cookiexhr.withCredentials = true;// 访问http-proxy-middleware代理服务器xhr.open('get', 'http://www.domain1.com:3000/login?user=admin',true);xhr.send();

2.）中间件服务器：

var express = require('express');var proxy = require('http-proxy-middleware');var app = express();app.use('/', proxy({ // 代理跨域目标接口 target: 'http://www.domain2.com:8080', changeOrigin: true, // 修改响应头信息，实现跨域并容许带cookie onProxyRes: function(proxyRes, req, res) { res.header('Access-Control-Allow-Origin', 'http://www.domain1.com'); res.header('Access-Control-Allow-Credentials', 'true'); }, // 修改响应信息中的cookie域名 cookieDomainRewrite: 'www.domain1.com' // 能够为false，表示不修改}));app.listen(3000);console.log('Proxy server is listen at port 3000...');

3.）Nodejs后台同（六：nginx）

二、 vue框架的跨域（1次跨域）

利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下，因为vue渲染服务和接口代理服务都是webpack-dev-server同一个，因此页面与代理接口之间再也不跨域，无须设置headers跨域信息了。

webpack.config.js部分配置：

module.exports = { entry: {}, module: {}, ... devServer: {historyApiFallback: true, proxy: [{ context: '/login', target:'http://www.domain2.com:8080', // 代理跨域目标接口 changeOrigin: true,cookieDomainRewrite: 'www.domain1.com' // 能够为false，表示不修改 }],noInfo: true }}

9、 WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通讯，同时容许跨域通信，是server push技术的一种很好的实现。

原生WebSocket API使用起来不太方便，咱们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

1.）前端代码：

<div>user input：<input type="text"></div><script src="./socket.io.js"></script><script>var socket = io('http://www.domain2.com:8080');// 链接成功处理socket.on('connect', function() { // 监听服务端消息 socket.on('message', function(msg) { console.log('data from server: ---> ' + msg); }); // 监听服务端关闭 socket.on('disconnect', function() { console.log('Server socket has closed.'); });});document.getElementsByTagName('input')[0].onblur = function() { socket.send(this.value);};</script>

2.）Nodejs socket后台：

var http = require('http');var socket = require('socket.io');// 启http服务var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-type': 'text/html' }); res.end();});server.listen('8080');console.log('Server is running at port 8080...');// 监听socket链接socket.listen(server).on('connection',function(client) { // 接收信息 client.on('message', function(msg) { client.send('hello：' + msg); console.log('data from client: ---> ' + msg); }); // 断开处理 client.on('disconnect', function() { console.log('Client socket has closed.'); });});