跨域大全

时间 2019-11-25

标签大全繁體版

原文原文链接

正常ajax请求表现

跨域类型：

跨域，指一个域下的文档或脚本试图去请求另外一个域下的资源，ajax跨域只是属于浏览器"同源策略"中的一部分，其它的还有：javascript

0）Cookie跨域iframe跨域，LocalStorage跨域php

1.) 资源跳转： A连接、重定向、表单提交css

2.) 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链html

3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操做等前端

为何出现跨域

它是由浏览器的同源策略形成的。所谓的同源是协议、域名、端口均为相同，当其中有一个不相同时，出现跨域。vue

普通ajax跨域请求，请求到达服务器，服务端响应数据返回给浏览器的时候，浏览器根据响应头的Access-Control-Allow-Origin字段的值来判断发出请求的脚本是否有权限获取数据，通常状况下，服务器端若是没有在这个字段作特殊处理的话，在跨域的状况下该脚本是没有权限访问的，响应数据会被浏览器给拦截了。html5

让浏览器支持跨域，在chrome的属性里加上这个，与前面包持一个空格java

--disable-web-security --user-data-dirnode

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.htmljquery

同源策略限制了一下行为：

Cookie、LocalStorage 和 IndexDB 没法读取
DOM 和 JS 对象没法获取

浏览器默认禁止了跨域访问，但并不由止在页面中引用其余域的JS文件，并能够自由执行引入的JS文件中的function（包括操做cookie、Dom等等）。也就是文档和它引入的脚本能够不一样源

常见的跨域场景

localhost 调用 127.0.0.1 跨域

跨域时响应的表现：

第一种现象

No'Access-Control-Allow-Origin'headerispresent on the requested resource,而且 Theresponse had HTTP status code404

出现这种状况的缘由以下：

本次ajax请求是"非简单请求",因此请求前会发送一次预检请求(OPTIONS)
服务器端后台接口没有容许OPTIONS请求,致使没法找到对应接口地址

解决方案: 后端容许options请求

第二种现象

No'Access-Control-Allow-Origin'headerispresent on the requested resource,而且 Theresponse had HTTP status code405

这种现象和第一种有区别,这种状况下，后台方法容许OPTIONS请求,可是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会致使这个现象

解决方案：后端关闭对应的安全配置

第三种现象

No'Access-Control-Allow-Origin'headerispresent on the requested resource,而且 status200

这种现象和第一种和第二种有区别,这种状况下，服务器端后台容许OPTIONS请求,而且接口也容许OPTIONS请求,可是头部匹配时出现不匹配现象

好比origin头部检查不匹配,好比少了一些头部的支持(如常见的X-Requested-With头部),而后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,致使前端控制台报错

解决方案：后端增长对应的头部支持

第四种现象

heade contains multiple values'*,*'

表现现象是，后台响应的http头部信息有两个 Access-Control-Allow-Origin:*

说实话，这种问题出现的主要缘由就是进行跨域配置的人不了解原理，致使了重复配置，如：

常见于.net后台(通常在web.config中配置了一次origin,而后代码中又手动添加了一次origin(好比代码手动设置了返回*))
常见于.net后台(在IIS和项目的webconfig中同时设置Origin:*)

解决方案(一一对应):

建议删除代码中手动添加的*，只用项目配置中的便可
建议删除IIS下的配置*，只用项目配置中的便可

跨域的解决办法

jsonp跨域

在html页面中经过相应的标签从不一样域名下加载静态资源文件是被浏览器容许的，因此咱们能够经过这个"犯罪漏洞"来进行跨域。通常，咱们能够动态的建立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('response data: ' + JSON.stringify(data));
   };

服务端对应的接口在返回参数外面添加函数包裹层

foo({
 "test": "testData"
});

因为 <script> 元素请求的脚本，直接做为代码运行。这时，只要浏览器定义了foo函数，该函数就会当即调用。做为参数的JSON数据被视为JavaScript对象，而不是字符串，所以避免了使用JSON.parse的步骤。

注意：通常的JSONP接口和普通接口返回数据是有区别的，因此接口若是要作JSONO兼容，须要进行判断是否有对应callback关键字参数，若是有则是JSONP请求，返回JSONP数据，不然返回普通数据。

固然，jquery也支持jsonp的实现方式

$.ajax({
    url:'http://www.nealyang.cn/login',
    type:'GET',
    dataType:'jsonp',//请求方式为jsonp
    jsonpCallback:'callback',
    data:{
        "username":"Nealyang"
    }
})

基于JSONP的实现原理,因此JSONP只能是"GET"请求，不能进行较为复杂的POST和其它请求，因此遇到那种状况，就得参考下面的CORS解决跨域了(因此现在它也基本被淘汰了)

document.domain + iframe 跨域

这种跨域的方式最主要的是要求主域名相同子域名不一样。什么是主域名相同呢？

域名：主域名是不带www的域名，例如a.com，主域名前面带前缀的一般都为二级域名或多级域名，例如www.a.com实际上是二级域名。 domain只能设置为主域名，不能够在b.a.com中将domain设置为c.a.com。

www.nealyang.cn ，aaa.nealyang.cn ，ba.ad.nealyang.cn 这三个主域名都是nealyang.cn,而主域名不一样的就不能用此方法。

具体的作法举例：

在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = 'a.com'；而后经过a.html文件中建立一个iframe，去控制iframe的contentDocument，这样两个js文件之间就能够"交互"了。固然这种办法只能解决主域相同而二级域名不一样的状况，若是你异想天开的把script.a.com的domian设为alibaba.com那显然是会报错地！

window.name + iframe 跨域

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

a拿到不一样域b里的name的值：

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。这个是服务器返回的页面里就设置好的name值
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();
        }elseif (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从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操做。

因此如上，咱们就拿到了服务器返回的数据，可是有几个条件是必不可少的：

iframe标签的跨域能力
window.names属性值在文档刷新后依然存在的能力

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>

补充说明：其实location.hash和window.name都是差很少的，都是利用全局对象属性的方法，而后这两种方法和jsonp也是同样的，就是只可以实现get请求

postMessage跨域

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

a.）页面和其打开的新窗口的数据传递，是window.frames属性的成员或者是window.open方法建立的窗口

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() {
        var data = {
            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>
if(typeof window.addEventListener != 'undefined'){
    window.addEventListener('message',onmessage,false);
}else if(typeof window.attachEvent != 'undefined'){
    window.attachEvent('onmessage', onmessage);
}

跨域资源共享 CORS

由于是目前主流的跨域解决方案。原理图

简介

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它容许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS须要浏览器和服务器同时支持。目前，全部浏览器都支持该功能，IE浏览器不能低于IE10。IE8+：IE8/9须要使用XDomainRequest对象来支持CORS。

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

两种请求

浏览器将CORS请求分红两类：简单请求（simple request）和非简单请求（not-so-simple request）。只要同时知足如下两大条件，就属于简单请求。

请求方法是如下三种方法之一：HEAD、GET、POST。

HTTP的头信息不超出如下几种字段：

Accept-Language

Content-Language

Last-Event-ID

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

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

为何要分为简单请求和非简单请求，由于浏览器对这两种请求方式的处理方式是不一样的。

简单请求

基本流程

对于简单请求，浏览器直接发出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（请求头中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-开头

Access-Control-Allow-Origin :该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求
Access-Control-Allow-Credentials: 该字段可选。它的值是一个布尔值，表示是否容许发送Cookie。默认状况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie能够包含在请求中，一块儿发给服务器。这个值也只能设为true，若是服务器不要浏览器发送Cookie，删除该字段便可。
Access-Control-Expose-Headers:该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。若是想拿到其余字段，就必须在Access-Control-Expose-Headers里面指定。

withCredentials 属性

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

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

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端设置是否带cookie
xhr.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);
    }
};
// jquery
$.ajax({
    ...
   xhrFields: {
       withCredentials: true // 前端设置是否带cookie
   },
   crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie
    ...
});

不然，即便服务器赞成发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。可是，若是省略withCredentials设置，有的浏览器仍是会一块儿发送Cookie。这时，能够显式关闭withCredentials。

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

非简单请求

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

"预检"请求

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

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

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头信息。

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字段，"预检"请求的头信息包括两个特殊字段。

Access-Control-Request-Method：该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。
Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header

预检请求的回应

服务器收到"预检"请求之后，检查了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能够请求数据。该字段也能够设为星号，表示赞成任意跨源请求。

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

服务器回应的其余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

Access-Control-Allow-Methods：该字段必需，它的值是逗号分隔的一个字符串，代表服务器支持的全部跨域请求的方法。注意，返回的是全部支持的方法，而不单是浏览器请求的那个方法。这是为了不屡次"预检"请求。
Access-Control-Allow-Headers：若是浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，代表服务器支持的全部头信息字段，不限于浏览器在"预检"中请求的字段。
Access-Control-Allow-Credentials：该字段与简单请求时的含义相同。
Access-Control-Max-Age：该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即容许缓存该条回应1728000秒（即20天），在此期间，不用发出另外一条预检请求。

浏览器正常请求回应

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

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...

浏览器的正常CORS请求。上面头信息的Origin字段是浏览器自动添加的。下面是服务器正常的回应。

Access-Control-Allow-Origin: http://api.bob.com

Content-Type: text/html; charset=utf-8

Access-Control-Allow-Origin字段是每次回应都一定包含的

实际项目中，后端应该如何配置CORS请求

以解决问题(由于大量项目实践都是由后端进行解决的)，这里整理了一些常见的后端解决方案:

PHP后台配置

PHP后台得配置几乎是全部后台中最为简单的，遵循以下步骤便可：

第一步：配置Php 后台容许跨域

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
//主要为跨域CORS配置的两大基本信息,Origin和headers

第二步：配置Apache web服务器跨域(httpd.conf中)

原始代码

<Directory />
AllowOverride none
Require all denied

改成如下代码

<Directory />
Options FollowSymLinks
AllowOverride none
Order deny,allow
Allow from all
</Directory>

Node.js后台配置(express框架)

Node.js的后台也相对来讲比较简单就能够进行配置。只需用express以下配置：

app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
//这段仅仅为了方便返回json而已
res.header("Content-Type", "application/json;charset=utf-8");
if(req.method == 'OPTIONS') {
//让options请求快速返回
res.sendStatus(200);
} else {
next();
}
});

JAVA后台配置

JAVA后台配置只须要遵循以下步骤便可:

第一步：获取依赖jar包

下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下)

第二步：若是项目用了Maven构建的,请添加以下依赖到pom.xml中:(非maven请忽视)

<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>[ version ]</version>
</dependency>

其中版本应该是最新的稳定版本,CORS过滤器

第三步：添加CORS配置到项目的Web.xml中( App/WEB-INF/web.xml)

<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<!-- Note: All parameters are options, if omitted the CORS
Filter will fall back to the respective default values.
-->
<init-param>
<param-name>cors.allowGenericHttpRequests</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowSubdomains</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, HEAD, POST, OPTIONS</param-value>
</init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>X-Test-1, X-Test-2</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.maxAge</param-name>
<param-value>3600</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

请注意,以上配置文件请放到web.xml的前面,做为第一个filter存在(能够有多个filter的)

第四步：可能的安全模块配置错误(注意，某些框架中-譬如公司私人框架，有安全模块的，有时候这些安全模块配置会影响跨域配置，这时候能够先尝试关闭它们)

NET后台配置

.NET后台配置能够参考以下步骤：

第一步：网站配置

打开控制面板，选择管理工具,选择iis;右键单击本身的网站，选择浏览;打开网站所在目录,用记事本打开web.config文件添加下述配置信息,重启网站

请注意,以上截图较老,若是配置仍然出问题,能够考虑增长更多的headers容许,好比:

"Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept,Origin"

第二步：其它更多配置，若是第一步进行了后，仍然有跨域问题，多是

接口中有限制死一些请求类型(好比写死了POST等)，这时候请去除限制
接口中，重复配置了 Origin:*，请去除便可
IIS服务器中，重复配置了 Origin:*，请去除便可

结束语

CORS与JSONP的使用目的相同，可是比JSONP更强大。JSONP只支持GET请求，CORS支持全部类型的HTTP请求。JSONP的优点在于支持老式浏览器，以及能够向不支持CORS的网站请求数据。

WebSocket协议跨域

方法一：

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

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

前端代码：

<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>

node Server

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.');
    });
});

方法二：

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

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.');
    });
});

node代理跨域

方法一：

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

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

前端代码

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

后端代码

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...');

方法二：

node中间件实现跨域代理，原理大体与nginx相同，都是经过启一个代理服务器，实现数据的转发。

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

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

1.）前端代码示例：

var xhr = new XMLHttpRequest();
   
// 前端开关：浏览器是否读写cookie
xhr.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

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.html index.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();
   
// 前端开关：浏览器是否读写cookie
xhr.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) {
    var params = 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...');

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

}

参考文档

http://www.ruanyifeng.com/blog/2016/04/cors.html

https://segmentfault.com/a/1190000011145364