澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站不正是跨域么,前端跨域

别慌,不就是跨域么!

2017/12/27 · 基础技术 · 跨域

原文出处: Neal_yang   

前端开发中,跨域使我们经常遇到的一个问题,也是面试中经常被问到的一些问题,所以,这里,我们做个总结。小小问题,不足担心

跨域资源共享 CORS

Section1、为什么要跨域?

自古以来(1995年起),为了用户的信息安全,浏览器就引入了同源策略。那么同源策略是如何保证用户的信息安全的呢?
栗子1:如果没有同源策略,你打开了你的银行账户页面A,又打开了另一个不相关的页面B,这时候如果B是恶意网站,B可以通过Javascript轻松访问和修改A页面中的内容。
栗子2:现在我们广泛的使用cookie来维护用户的登录状态,而如果没有同源策略,这些cookie信息就会泄露,其他网站就可以冒充这个登录用户。
由此可以看出,同源策略确实是必不可少的,那么它会带来哪些限制呢?
1、Cookie、LocalStorage和IndexDB无法读取。
2、DOM无法获得。
3、AJAX请求不能发送。
有时候我们需要突破上述限制,就需要用跨域的方法来解决。

什么是跨域

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。

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

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 JS 对象无法获取
Ajax请求发送不出去

对于web开发来讲,由于浏览器的同源策略,我们需要经常使用一些hack的方法去跨域获取资源,但是hack的方法总归是hack。直到W3C出了一个标准-CORS-”跨域资源共享”(Cross-origin resource sharing)。

Section2、跨域是什么?

什么叫做不同的域?比如:
http://www.a.com:8000/a.js协议(http)、域名(www.a.com)、端口(8000)三者中有一个不同就叫不同的域。
跨域就是不同的域间相互访问时使用某些方法来突破上述限制。
【注意:协议或者端口的不同,只能通过后台来解决。】

常见的跨域场景

所谓的同源是指,域名、协议、端口均为相同。

JavaScript

调用 非跨域 调用 跨域,主域不同 调用 跨域,子域名不同 调用 跨域,端口不同 调用 跨域,协议不同 localhost 调用 127.0.0.1 跨域

1
2
3
4
5
6
7
8
9
10
11
http://www.nealyang.cn/index.html 调用   http://www.nealyang.cn/server.php  非跨域
 
http://www.nealyang.cn/index.html 调用   http://www.neal.cn/server.php  跨域,主域不同
 
http://abc.nealyang.cn/index.html 调用   http://def.neal.cn/server.php  跨域,子域名不同
 
http://www.nealyang.cn:8080/index.html 调用   http://www.nealyang.cn/server.php  跨域,端口不同
 
https://www.nealyang.cn/index.html 调用   http://www.nealyang.cn/server.php  跨域,协议不同
 
localhost   调用 127.0.0.1 跨域

跨域的解决办法
jsonp跨域

jsonp跨域其实也是JavaScript设计模式中的一种代理模式。在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的,所以我们可以通过这个“犯罪漏洞”来进行跨域。一般,我们可以动态的创建script标签,再去请求一个带参网址来实现跨域通信

JavaScript

//原生的实现方式 let script = document.createElement('script'); script.src = ''; document.body.appendChild(script); function callback(res) { console.log(res); }

1
2
3
4
5
6
7
8
9
10
//原生的实现方式
let script = document.createElement('script');
 
script.src = 'http://www.nealyang.cn/login?username=Nealyang&callback=callback';
 
document.body.appendChild(script);
 
function callback(res) {
  console.log(res);
}

当然,jquery也支持jsonp的实现方式

JavaScript

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

1
2
3
4
5
6
7
8
9
$.ajax({
    url:'http://www.nealyang.cn/login',
    type:'GET',
    dataType:'jsonp',//请求方式为jsonp
    jsonpCallback:'callback',
    data:{
        "username":"Nealyang"
    }
})

虽然这种方式非常好用,但是一个最大的缺陷是,只能够实现get请求
document.domain iframe 跨域

这种跨域的方式最主要的是要求主域名相同。什么是主域名相同呢? www.nealyang.cn aaa.nealyang.cn ba.ad.nealyang.cn 这三个主域名都是nealyang.cn,而主域名不同的就不能用此方法。

假设目前a.nealyang.cn 和 b.nealyang.cn 分别对应指向不同ip的服务器。

a.nealyang.cn 下有一个test.html文件

JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html</title> <script type="text/javascript" src = "jquery-1.12.1.js"></script> </head> <body> <div>A页面</div> <iframe style = "display : none" name = "iframe1" id = "iframe" src="" frameborder="0"></iframe> <script type="text/javascript"> $(function(){ try{ document.domain = "nealyang.cn" }catch(e){} $("#iframe").load(function(){ var jq = document.getElementById('iframe').contentWindow.$ jq.get(" console.log(data); }); }) }) </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html</title>
    <script type="text/javascript" src = "jquery-1.12.1.js"></script>
</head>
<body>
    <div>A页面</div>
    <iframe
    style = "display : none"
    name = "iframe1"
    id = "iframe"
    src="http://b.nealyang.cn/1.html" frameborder="0"></iframe>
    <script type="text/javascript">
        $(function(){
            try{
                document.domain = "nealyang.cn"
            }catch(e){}
            $("#iframe").load(function(){
                var jq = document.getElementById('iframe').contentWindow.$
                jq.get("http://nealyang.cn/test.json",function(data){
                    console.log(data);
                });
            })
        })
    </script>
</body>
</html>

利用 iframe 加载 其他域下的文件(nealyang.cn/1.html), 同时 document.domain 设置成 nealyang.cn ,当 iframe 加载完毕后就可以获取 nealyang.cn 域下的全局对象, 此时尝试着去请求 nealyang.cn 域名下的 test.json (此时可以请求接口),就会发现数据请求失败了~~ 惊不惊喜,意不意外!!!!!!!

数据请求失败,目的没有达到,自然是还少一步:

JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html</title> <script type="text/javascript" src = "jquery-1.12.1.js"></script> <script type="text/javascript"> $(function(){ try{ document.domain = "nealyang.com" }catch(e){} }) </script> </head> <body> <div id = "div1">B页面</div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html</title>
    <script type="text/javascript" src = "jquery-1.12.1.js"></script>
    <script type="text/javascript">
        $(function(){
            try{
                document.domain = "nealyang.com"
            }catch(e){}
        })
    </script>
</head>
<body>
    <div id = "div1">B页面</div>
</body>
</html>

此时在进行刷新浏览器,就会发现数据这次真的是成功了~
window.name iframe 跨域

window.name属性可设置或者返回存放窗口名称的一个字符串。他的神器之处在于name值在不同页面或者不同域下加载后依旧存在,没有修改就不会发生变化,并且可以存储非常长的name(2MB)

假设index页面请求远端服务器上的数据,我们在该页面下创建iframe标签,该iframe的src指向服务器文件的地址(iframe标签src可以跨域),服务器文件里设置好window.name的值,然后再在index.html里面读取改iframe中的window.name的值。完美~

JavaScript

<body> <script type="text/javascript"> iframe = document.createElement('iframe'), iframe.src = ''; document.body.appendChild(iframe); iframe.onload = function() { console.log(iframe.contentWindow.name) }; </script> </body>

1
2
3
4
5
6
7
8
9
10
<body>
  <script type="text/javascript">
    iframe = document.createElement('iframe'),
    iframe.src = 'http://localhost:8080/data.php';
    document.body.appendChild(iframe);
    iframe.onload = function() {
      console.log(iframe.contentWindow.name)
    };
  </script>
</body>

当然,这样还是不够的。

因为规定如果index.html页面和和该页面里的iframe框架的src如果不同源,则也无法操作框架里的任何东西,所以就取不到iframe框架的name值了,告诉你我们不是一家的,你也休想得到我这里的数据。 既然要同源,那就换个src去指,前面说了无论怎样加载window.name值都不会变化,于是我们在index.html相同目录下,新建了个proxy.html的空页面,修改代码如下:

 

JavaScript

<body> <script type="text/javascript"> iframe = document.createElement('iframe'), iframe.src = ''; document.body.appendChild(iframe); iframe.onload = function() { iframe.src = ''; console.log(iframe.contentWindow.name) }; </script> </body>

1
2
3
4
5
6
7
8
9
10
11
<body>
  <script type="text/javascript">
    iframe = document.createElement('iframe'),
    iframe.src = 'http://localhost:8080/data.php';
    document.body.appendChild(iframe);
    iframe.onload = function() {
      iframe.src = 'http://localhost:81/cross-domain/proxy.html';
      console.log(iframe.contentWindow.name)
    };
  </script>
</body>

理想似乎很美好,在iframe载入过程中,迅速重置iframe.src的指向,使之与index.html同源,那么index页面就能去获取它的name值了!但是现实是残酷的,iframe在现实中的表现是一直不停地刷新, 也很好理解,每次触发onload时间后,重置src,相当于重新载入页面,又触发onload事件,于是就不停地刷新了(但是需要的数据还是能输出的)。修改后代码如下:

JavaScript

<body> <script type="text/javascript"> iframe = document.createElement('iframe'); iframe.style.display = 'none'; var state = 0; iframe.onload = function() { if(state === 1) { var data = JSON.parse(iframe.contentWindow.name); console.log(data); iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } else if(state === 0) { state = 1; iframe.contentWindow.location = ''; } }; iframe.src = ''; document.body.appendChild(iframe); </script> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
  <script type="text/javascript">
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    var state = 0;
    
    iframe.onload = function() {
      if(state === 1) {
          var data = JSON.parse(iframe.contentWindow.name);
          console.log(data);
          iframe.contentWindow.document.write('');
          iframe.contentWindow.close();
        document.body.removeChild(iframe);
      } else if(state === 0) {
          state = 1;
          iframe.contentWindow.location = 'http://localhost:81/cross-domain/proxy.html';
      }
    };
 
    iframe.src = 'http://localhost:8080/data.php';
    document.body.appendChild(iframe);
  </script>
</body>

所以如上,我们就拿到了服务器返回的数据,但是有几个条件是必不可少的:

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

location.hash iframe 跨域

此跨域方法和上面介绍的比较类似,一样是动态插入一个iframe然后设置其src为服务端地址,而服务端同样输出一端js代码,也同时通过与子窗口之间的通信来完成数据的传输。

关于锚点相信大家都已经知道了,其实就是设置锚点,让文档指定的相应的位置。锚点的设置用a标签,然后href指向要跳转到的id,当然,前提是你得有个滚动条,不然也不好滚动嘛是吧。

而location.hash其实就是url的锚点。比如

基础知识补充完毕,下面我们来说下如何实现跨域

如果index页面要获取远端服务器的数据,动态的插入一个iframe,将iframe的src执行服务器的地址,这时候的top window 和包裹这个iframe的子窗口是不能通信的,因为同源策略,所以改变子窗口的路径就可以了,将数据当做改变后的路径的hash值加载路径上,然后就可以通信了。将数据加在index页面地址的hash上, index页面监听hash的变化,h5的hashchange方法

JavaScript

<body> <script type="text/javascript"> function getData(url, fn) { var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = url; iframe.onload = function() { fn(iframe.contentWindow.location.hash.substring(1)); window.location.hash = ''; document.body.removeChild(iframe); }; document.body.appendChild(iframe); } // get data from server var url = ''; getData(url, function(data) { var jsondata = JSON.parse(data); console.log(jsondata.name ' ' jsondata.age); }); </script> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
  <script type="text/javascript">
    function getData(url, fn) {
      var iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = url;
 
      iframe.onload = function() {
        fn(iframe.contentWindow.location.hash.substring(1));
        window.location.hash = '';
        document.body.removeChild(iframe);
      };
 
      document.body.appendChild(iframe);
    }
 
    // get data from server
    var url = 'http://localhost:8080/data.php';
    getData(url, function(data) {
      var jsondata = JSON.parse(data);
      console.log(jsondata.name ' ' jsondata.age);
    });
  </script>
</body>

补充说明:其实location.hash和window.name都是差不多的,都是利用全局对象属性的方法,然后这两种方法和jsonp也是一样的,就是只能够实现get请求

postMessage跨域

这是由H5提出来的一个炫酷的API,IE8 ,chrome,ff都已经支持实现了这个功能。这个功能也是非常的简单,其中包括接受信息的Message时间,和发送信息的postMessage方法。

发送信息的postMessage方法是向外界窗口发送信息

JavaScript

otherWindow.postMessage(message,targetOrigin);

1
otherWindow.postMessage(message,targetOrigin);

otherWindow指的是目标窗口,也就是要给哪一个window发送消息,是window.frames属性的成员或者是window.open方法创建的窗口。 Message是要发送的消息,类型为String,Object(IE8、9不支持Obj),targetOrigin是限定消息接受范围,不限制就用星号 *

接受信息的message事件

JavaScript

var onmessage = function(event) { var data = event.data; var origin = event.origin; } if(typeof window.addEventListener != 'undefined'){ window.addEventListener('message',onmessage,false); }else if(typeof window.attachEvent != 'undefined'){ window.attachEvent('onmessage', onmessage); }

1
2
3
4
5
6
7
8
9
10
var onmessage = function(event) {
  var data = event.data;
  var origin = event.origin;
}
 
if(typeof window.addEventListener != 'undefined'){
    window.addEventListener('message',onmessage,false);
}else if(typeof window.attachEvent != 'undefined'){
    window.attachEvent('onmessage', onmessage);
}

举个栗子

a.html()

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<iframe id="iframe" src="http://www.neal.cn/b.html" style="display:none;"></iframe>
<script>      
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向neal传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.neal.cn');
    };
 
    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from neal ---> ' e.data);
    }, false);
</script>

b.html()

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from nealyang ---> ' e.data);
 
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
 
            // 处理后再发回nealyang
            window.parent.postMessage(JSON.stringify(data), 'http://www.nealyang.cn');
        }
    }, false);
</script>

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

Section3、怎么跨域?

一、解决Section1中提到的1、2两点限制:

1.Cookie、LocalStorage和IndexDB无法读取。2.DOM无法获得。
方法1、通过document.domain跨子域
【适用范围:(1)两个域只是子域不同;(2)只适用于iframe窗口与父窗口之间互相获取cookie和DOM节点,不能突破LocalStorage和IndexDB的限制。】
当两个不同的域只是子域不同时,可以通过把document.domain设置为他们共同的父域来解决。
栗子:
A: [http://www.example.com/a.html(http://www.example.com/a.html)BB): http://example.com/b.html当A、B想要获取对方的**cookie或者DOM节点时可以设置:document.domain='example.com';来解决。
这时A网页通过脚本设置:document.cookie = "testA=hello";B网页就可以拿到这个cookie:
var aCookie = document.cookie;

跨域资源共享 CORS

因为是目前主流的跨域解决方案。所以这里多介绍点。
简介

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

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。IE8 :IE8/9需要使用XDomainRequest对象来支持CORS。

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。 因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
两种请求

说起来很搞笑,分为两种请求,一种是简单请求,另一种是非简单请求。只要满足下面条件就是简单请求

请求方式为HEAD、POST 或者 GET
http头信息不超出一下字段:Accept、Accept-Language 、 Content-Language、 Last-Event-ID、 Content-Type(限于三个值:application/x-www-form-urlencoded、multipart/form-data、text/plain)

为什么要分为简单请求和非简单请求,因为浏览器对这两种请求方式的处理方式是不同的。
简单请求
基本流程

对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。 下面是一个例子,浏览器发现这次跨源AJAX请求是简单请求,就自动在头信息之中,添加一个Origin字段。

JavaScript

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

1
2
3
4
5
6
7
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指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。

JavaScript

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

1
2
3
4
   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-开头

  • 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属性。

JavaScript

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容 // 前端设置是否带cookie xhr.withCredentials = true; xhr.open('post', '', 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 ... });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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请求,否则就报错。

JavaScript

var url = ''; var xhr = new XMLHttpRequest(); xhr.open('PUT', url, true); xhr.setRequestHeader('X-Custom-Header', 'value'); xhr.send();

1
2
3
4
5
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头信息。

JavaScript

OPTIONS /cors HTTP/1.1 Origin: 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...

1
2
3
4
5
6
7
8
    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字段以后,确认允许跨源请求,就可以做出回应

JavaScript

HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 01:15:39 GMT Server: Apache/2.0.61 (Unix) Access-Control-Allow-Origin: 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

1
2
3
4
5
6
7
8
9
10
11
12
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回应,但是没有任何CORS相关的头信息字段。这时,浏览器就会认定,服务器不同意预检请求,因此触发一个错误,被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。

服务器回应的其他CORS相关字段如下:

JavaScript

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
2
3
4
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头信息字段。

JavaScript

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

1
2
3
4
5
6
7
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字段是浏览器自动添加的。下面是服务器正常的回应。

JavaScript

Access-Control-Allow-Origin: Content-Type: text/html; charset=utf-8

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

Access-Control-Allow-Origin字段是每次回应都必定包含的
结束语

CORS与JSONP的使用目的相同,但是比JSONP更强大。JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
WebSocket协议跨域

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

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

前端代码:

JavaScript

<div>user input:<input type="text"></div> <script src="./socket.io.js"></script> <script> var socket = io(''); // 连接成功处理 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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服务器

前端代码

JavaScript

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

1
2
3
4
5
6
7
8
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();

后端代码

JavaScript

var express = require('express'); var proxy = require('http-proxy-middleware'); var app = express(); app.use('/', proxy({ // 代理跨域目标接口 target: '', changeOrigin: true, // 修改响应头信息,实现跨域并允许带cookie onProxyRes: function(proxyRes, req, res) { res.header('Access-Control-Allow-Origin', ''); 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...');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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...');

nginx代理跨域

NGINX其实个人没有怎么玩过,所以暂且也就不能误人子弟了,原谅笔者才疏尚浅~ 有机会学习研究再回来补充~~
交流

欢迎加入react技术栈、前端技术杂谈QQ群

前端技术杂谈:604953717
react技术栈:398240621

参考文档

1 赞 6 收藏 评论

澳门新浦京娱乐场网站 1

首先来说 CORS需要浏览器和服务端同时支持的,对于兼容性来说主要是ie10 ,其它现代浏览器都是支持的。

方法2、通过window.name跨域

【适用范围:(1)可以是两个完全不同源的域;(2)同一个窗口内:即同一个标签页内先后打开的窗口。】
pre-condition:
window.name属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的。
基于这个思想,我们可以在某个页面设置好 window.name 的值,然后在本标签页内跳转到另外一个域下的页面。在这个页面中就可以获取到我们刚刚设置的 window.name 了。
结合iframe还有更高级的用法:
父窗口先打开一个与自己不同源的子窗口,在这个子窗口里设置:
window.name = data;
然后让子窗口跳转到一个与父窗口同域的网址:
location='http://www.parent.com/a.html';
这时,因为同域并且同一窗口window.name是不变的,所以父窗口可以获取到子窗口下的window.name。
var data = document.getElementById('myFrame').contentWindow.name;
优点:window.name容量很大,可以放置非常长的字符串;缺点:必须监听子窗口window.name属性的变化,影响网页性能。

方法3、使用HTML5的window.postMessage跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8 、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
otherWindow.postMessage(message, targetOrigin);
otherWindow:接受消息页面的window的引用。可以是页面中iframe的contentWindow属性;window.open的返回值;通过name或下标从window.frames取到的值。
message:所要发送的数据,string类型。
targetOrigin:用于限制otherWindow,*表示不做限制。
栗子1:
在父页面中嵌入子页面,通过postMessage发送数据。parent.com/index.html中的代码:
<iframe id="ifr" src="child.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = 'http://child.com';
// 若写成'http://child.com/c/proxy.html'效果一样
// 若写成'http://c.com'就不会执行postMessage了
ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>
在子页面中通过message事件监听父页面发送来的消息并显示。child.com/index.html中的代码:
<script type="text/javascript">
window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin == 'http://parent.com') {
alert(event.data); // 弹出"I was there!"
alert(event.source);
// 对parent.com、index.html中window对象的引用
// 但由于同源策略,这里event.source不可以访问window对象
}
}, false);
</script>
栗子2:
假设在a.html里嵌套个
<iframe src="" frameborder="0"></iframe>
在这两个页面里互相通信
a.html
window.onload = function() {
window.addEventListener("message", function(e) {
alert(e.data);
});
window.frames[0].postMessage("b data", "http://www.child.com/b.html");
}
b.html
window.onload = function() {
window.addEventListener("message", function(e) {
alert(e.data);
});
window.parent.postMessage("a data", "http://www.parent.com/a.html");
}
这样打开a页面,首先监听到了b.html通过postMessage传来的消息,就先弹出 a data,然后a通过postMessage传递消息给子页面b.html,这时会弹出 b data。

澳门新浦京娱乐场网站 2

二、解决第3点限制:

3)AJAX请求不能发送。

使用 CORS 跨域的时候其实和普通的 ajax 过程是一样的,只是浏览器在发现这是一个跨域请求的时候会自动帮我们处理一些事,比如验证等等,所以说只要服务端提供支持,前端是不需要做额外的事情的。

方法4、通过JSONP跨域

【适用范围:(1)可以是两个完全不同源的域;(2)只支持HTTP请求中的GET方式;(3)老式浏览器全部支持;(4)需要服务端支持】
JSONP(JSON with Padding)是资料格式JSON的一种使用模式,可以让网页从别的网域要资料。
由于浏览器的同源策略,在网页端出现了这个“跨域”的问题,然而我们发现,所有的 src 属性并没有受到相关的限制,比如 img / script 等。
JSONP 的原理就要从 script 说起。script 可以引用其他域的脚本文件,比如这样:
a.html
...
<script>
function callback(data) {
console.log(data.url)
}
</script>
<script src='b.js'></script>
...
b.js
callback({url: 'http://www.rccoder.net'})
这就类似于JSONP的原理了。
JSONP的基本思想是:先在网页上添加一个script标签,设置这个script标签的src属性用于向服务器请求JSON数据 ,需要注意的是,src属性的查询字符串一定要加一个callback函数,用来指定回调函数的名字 。而这个函数是在资源加载之前就已经在前端定义好的,这个函数接受一个参数并利用这个参数做一些事情。向服务器请求后,服务器会将JSON数据放在一个指定名字的回调函数里作为其参数传回来。这时,因为函数已经在前端定义好了,所以会直接调用。
一个栗子:
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');//;//)请求服务器数据并规定回调函数为foo
}
function foo(data) {
console.log('Your public IP address is: ' data.ip);
};
向服务器example.com请求数据,这时服务器会先生成JSON数据,这里是{"ip": "8.8.8.8"},然后以JS语法的方式生成一个函数,函数名就是传递上来的callback参数的值,最后将数据放在函数的参数中返回:
foo({
"ip": "8.8.8.8"
});
客户端解析script标签,执行返回的JS代码,调用函数。

两种请求

方法5、通过CORS跨域

【适用范围:(1)可以是两个完全不同源的域;(2)支持所有类型的HTTP请求;(3)被绝大多数现代浏览器支持,老式浏览器不支持;(4)需要服务端支持】
对于前端开发者来说,跨域的CORS通信与同源的AJAX通信没有差别,代码完全一样。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
只要同时满足以下两大条件,就属于简单请求。
(1) 请求方法是以下三种方法之一:
HEAD
GET
POST
(2)HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同时满足上面两个条件,就属于非简单请求。浏览器对这两种请求的处理,是不一样的。
简单请求:
下面是一次跨源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指定的源在许可范围内,那么服务器返回的头信息中会包含Access-Control-Allow-Origin字段,值与origin的值相同,以及其他几个相关字段:
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Access-Control-Allow-Origin: 该字段是必须的。要么与origin相同,要么为*
Access-Control-Allow-Credentials: 该字段可选。设为true表示服务器允许发送cookie
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字段的值。
想要发送cookie,这里还有两点需要额外注意:
1)开发者必须在AJAX请求中打开withCredentials属性。
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
否则即使服务器允许,客户端也不会发送。
2)Access-Control-Allow-Origin不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。
非简单请求:
1.预检请求:
非简单请求会在正式通信前加一次预检(preflight)请求。作用是浏览器先询问服务器当前网页所在域名是否在服务器的许可名单中,以及可以使用哪些HTTP方法以及头信息字段。只有得到肯定答复,浏览器才会发送XMLHttpRequest,否则报错。
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,表示这个请求是用来询问的,头信息中的关键信息有3个:
(1)表示请求来自哪个源
Origin: http://api.bob.com
(2)列出浏览器的CORS请求会用到哪些HTTP方法
Access-Control-Request-Method: PUT
(3)指定浏览器CORS请求会额外发送的头信息字段
Access-Control-Request-Headers: X-Custom-Header
2.预检请求的回应(有两种情况:A允许、B不允许)
A.服务器允许这次跨域请求
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
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
服务器返回中要注意的字段:
(1)服务器同意的跨域请求源:
Access-Control-Allow-Origin: http://api.bob.com
(2)服务器支持的所有跨域请求的方法:
Access-Control-Allow-Methods: GET, POST, PUT
(3)表明服务器支持的所有头信息字段:
Access-Control-Allow-Headers: X-Custom-Header
(4)指定本次预检请求的有效期,单位为秒,即允许请求该条回应在有效期之前都不用再发送预检请求:
Access-Control-Max-Age: 1728000
B.服务器不允许这次跨域请求即origin指定的源不在许可范围内,服务器会返回一个正常的HTTP回应。但是头信息中没有包含Access-Control-Allow-Origin字段,就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。但是要注意的是,这种HTTP回应的状态码很有可能是200,所以无法通过状态码识别这种错误。
3.正式请求过了预检请求,非简单请求的正式请求就与简单请求一样了。

CORS的请求分两种,这也是浏览器为了安全做的一些处理,不同情况下浏览器执行的操作也是不一样的,主要分为两种请求,当然这一切我们是不需要做额外处理的,浏览器会自动处理的。

简单请求(simple request)

只要同时满足以下两大条件,就属于简单请求。

条件

1) 请求方法是以下三种方法中的一个:

HEAD

GET

POST

2)HTTP的头信息不超出以下几种字段:

Accept

Accept-Language

Content-Language

Last-Event-ID

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

过程

对于简单的跨域请求,浏览器会自动在请求的头信息加上 Origin 字段,表示本次请求来自哪个源(协议 域名 端口),服务端会获取到这个值,然后判断是否同意这次请求并返回。

// 请求

GET /cors HTTP/1.1

Origin:

Host: api.alice.com

Accept-Language: en-US

Connection: keep-alive

User-Agent: Mozilla/5.0...

1.服务端允许

如果服务端许可本次请求,就会在返回的头信息多出几个字段:

// 返回

Access-Control-Allow-Origin:

Access-Control-Allow-Credentials: true

Access-Control-Expose-Headers: Info

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

这三个带有 Access-Control 开头的字段分别表示:

Access-Control-Allow-Origin

必须。它的值是请求时Origin字段的值或者 *,表示接受任意域名的请求。

Access-Control-Allow-Credentials;

可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。

再需要发送cookie的时候还需要注意要在AJAX请求中打开withCredentials属性:var xhr = new XMLHttpRequest(); xhr.withCredentials=true;

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

Access-Control-Expose-Headers

可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader('Info')可以返回Info字段的值。

2.服务端拒绝

当然我们为了防止接口被乱调用,需要限制源,对于不允许的源,服务端还是会返回一个正常的HTTP回应,但是不会带上 Access-Control-Allow-Origin 字段,浏览器发现这个跨域请求的返回头信息没有该字段,就会抛出一个错误,会被 XMLHttpRequest的 onerror 回调捕获到。

这种错误无法通过 HTTP 状态码判断,因为回应的状态码有可能是200

非简单请求

条件

出了简单请求以外的CORS请求。

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

过程

1)预检请求

非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为”预检”请求(preflight)。

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

预检请求的发送请求:

OPTIONS /cors HTTP/1.1

Origin:

Access-Control-Request-Method: PUT

Access-Control-Request-Headers: X-Custom-Header

Host: api.qiutc.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。

预检请求的返回:

HTTP/1.1 200 OK

Date: Mon, 01 Dec 2008 01:15:39 GMT

Server: Apache/2.0.61 (Unix)

Access-Control-Allow-Origin:

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

Access-Control-Allow-Methods

必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求。

Access-Control-Allow-Headers

如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在”预检”中请求的字段。

Access-Control-Max-Age

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

2)浏览器的正常请求和回应

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

参考:《跨域资源共享 CORS 详解》

阮大神的文章,复制粘贴了不少。

jsonp

jsonp = json padding

其实对于常用性来说,jsonp应该是使用最经常的一种跨域方式了,他不受浏览器兼容性的限制。但是他也有他的局限性,只能发送 GET 请求,需要服务端和前端规定好,写法丑陋。

它的原理在于浏览器请求 script 资源不受同源策略限制,并且请求到 script 资源后立即执行。

主要做法是这样的:

在浏览器端:

首先全局注册一个callback回调函数,记住这个函数名字(比如:resolveJson),这个函数接受一个参数,参数是期望的到的服务端返回数据,函数的具体内容是处理这个数据。

然后动态生成一个script 标签,src为:请求资源的地址+获取函数的字段名+回调函数名称,这里的获取函数的字段名是要和服务端约定好的,是为了让服务端拿到回调函数名称。(如:www.qiute.com?callbackName=resolveJson)。

function resolveJosn(result) {

console.log(result.name);

}

var jsonpScript= document.createElement("script");

jsonpScript.type = "text/javascript";

jsonpScript.src = "";

document.getElementsByTagName("head")[0].appendChild(jsonpScript);

服务端

在接受到浏览器端 script的请求之后,从url的query的callbackName获取到回调函数的名字,例子中是resolveJson。

然后动态生成一段javascript片段去给这个函数传入参数执行这个函数。比如:

resolveJson({name: 'qiutc'});

执行

服务端返回这个 script 之后,浏览器端获取到 script 资源,然后会立即执行这个 javascript,也就是上面那个片段。这样就能根据之前写好的回调函数处理这些数据了。

在一些第三方库往往都会封装jsonp的操作,比如 jQuery 的$.getJSON。

document.domain

一个页面框架(iframe/frame)之间(父子或同辈),是能够获取到彼此的window对象的,但是这个 window不能拿到方法和属性(尼玛这有什么用,甩脸)。

// 当前页面域名

function onLoad() {

var iframe =document.getElementById('iframe');

var iframeWindow = iframe.contentWindow; // 这里可以获取 iframe 里面 window 对象,但是几乎没用

var doc = iframeWindow.document; // 获取不到

}

这个时候,document.domain

就可以派上用场了,我们只要把 和

这两个页面的 document.domain 都设成相同的域名就可以了。

前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致。

但要注意的是,document.domain的设置是有限制的,我们只能把

document.domain设置成自身或更高一级的父域,且主域必须相同。例如:a.b.example.com 中某个文档的

document.domain可以设成a.b.example.com、b.example.com、example.com中的任意一个,但是不可以设成

c.a.b.example.com,因为这是当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。

这样我们就可以通过js访问到iframe中的各种属性和对象了。

// 主页面:

document.domain = 'qiutc.me';

function onLoad() {

var iframe =document.getElementById('iframe');

var iframeWindow = iframe.contentWindow; // 这里可以获取 iframe 里面 window 对象并且能得到方法和属性

var doc = iframeWindow.document; // 获取到

}

// iframe 里面的页面

document.domain = 'qiutc.me';

window.name

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个

window.name 的,每个页面对 window.name 都有读写的权限,window.name

是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

比如有一个www.qiutc.me/a.html页面,需要通过a.html页面里的js来获取另一个位于不同域上的页面www.qiutc.com/data.html里的数据。

data.html页面里的代码很简单,就是给当前的window.name设置一个a.html页面想要得到的数据值。data.html里的代码:

window.name = '我是被期望得到的数据';

那么在 a.html 页面中,我们怎么把 data.html

页面载入进来呢?显然我们不能直接在 a.html 页面中通过改变 window.location

来载入data.html页面(这简直扯蛋)因为我们想要即使 a.html页面不跳转也能得到data.html里的数据。

答案就是在 a.html 页面中使用一个隐藏的 iframe 来充当一个中间人角色,由 iframe 去获取 data.html的数据,然后a.html再去得到iframe获取到的数据。

充当中间人的

iframe

想要获取到data.html的通过window.name设置的数据,只需要把这个iframe的src设为www.qiutc.com/data.html就行了。然后a.html想要得到iframe所获取到的数据,也就是想要得到iframe的window.name的值,还必须把这个iframe的src设成跟a.html页面同一个域才行,不然根据前面讲的同源策略,a.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。

// a.html

Document

function getData() {

var iframe =document.getElementById('iframe');

iframe.onload = function() {

var data = iframe.contentWindow.name; // 得到

}

iframe.src = 'b.html';  // 这里b和a同源

}

window.postMessage

window.postMessage(message, targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源。兼容性:

调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符

* 。

需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。

上面所说的向其他window对象发送消息,其实就是指一个页面有几个框架的那种情况,因为每一个框架都有一个window对象。在讨论第种方法的时候,我们说过,不同域的框架间是可以获取到对方的window对象的,虽然没什么用,但是有一个方法是可用的-window.postMessage。下面看一个简单的示例,有两个页面:

// 主页面  blog.qiutc.com

function onLoad() {

var iframe =document.getElementById('iframe');

var iframeWindow = iframe.contentWindow;

iframeWindow.postMessage("I'm message from main page.");

}

// b 页面

window.onmessage = function(e) {

e = e || event;

console.log(e.data);

}

CSST (CSS Text Transformation)

一种用 CSS 跨域传输文本的方案。

优点:相比 JSONP 更为安全,不需要执行跨站脚本。

缺点:没有 JSONP 适配广,CSST 依赖支持 CSS3 的浏览器。

原理:通过读取 CSS3 content 属性获取传送内容。

具体可以参考:CSST (CSS Text Transformation)

利用flash

flash 嘛,这个东西注定灭亡,不想说了。。。

via:

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站不正是跨域么,前端跨域