澳门新萄京:不就是跨域么,学习笔记
分类:澳门新萄京最大平台

JSONProxy – 获取跨域json数据工具

2015/07/10 · JavaScript · JSON, JSONProxy

原文出处: 韩子迟   

JSONProxy是一款很好的获取json数据的代理网站,“Enables cross-domain requests to any JSON API”。当你苦于无法跨域获取json数据时,不妨一试,说不定能事半功倍。

比如这位朋友,想通过ajax获取必应的每日一图的url(是否可以通过ajax获取“Bing每日一图”?)很显然,这个ajax是跨域的,直接获取会因为跨域报错;服务端也肯定不会有对你本地localhost的“Access-Control-Allow-Origin”的设置,所以CORS策略也是不行的;因为是个json数据,没有方法名包裹,所以jsonp也是不行。楼主暂时还没接触过其他的跨域方法,如果要我去获取url,只能通过服务端的代码,服务端去获取json数据,然后index页面去ajax请求服务端获取的json数据(此时index页面和服务端同源),代码量增加,而要做的仅仅只是获取一个json数据啊!这时JSONProxy就帮你做好了服务端的工作,是不是很爽!

跨域:掘金地址——

  • 原文:九种跨域方式实现原理

别慌,不就是跨域么!

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

原文出处: Neal_yang   

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

Easy: JSONP

原生的JavaScript:

澳门新萄京:不就是跨域么,学习笔记。XHTML

<script> function myCallback(data){ console.log(data); } </script> <script src=";

1
2
3
4
5
6
<script>
  function myCallback(data){
    console.log(data);
  }
</script>
<script src="https://jsonp.afeld.me/?callback=myCallback&url=http://jsonview.com/example.json"></script>

myCallback函数里的data就是返回的json数据了。很显然,服务器会帮你去请求你需要的json数据,然后包裹在你设置的回调函数名中,这时要注意的代码中的红色两处要保持一致,url后跟的就是需要的json数据地址。

当然JQuery封装好的方法更加简单:

XHTML

<script> $.getJSON('', function(data){ console.log(data); }); </script>

1
2
3
4
5
<script>
  $.getJSON('https://jsonp.afeld.me/?callback=?&url=http://jsonview.com/example.json', function(data){
    console.log(data);
  });
</script>

另一篇学习地址:

Fundebug经授权转载,版权归原作者所有。

什么是跨域

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

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

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

Easier: Cross-domain AJAX (CORS)

比jsonp更简单的方法是CORS(好吧,也没简单到哪去啊…)

XHTML

<script> $.get('', function(data){ console.log(data); }); </script>

1
2
3
4
5
<script>
  $.get('https://jsonp.afeld.me/?url=http://jsonview.com/example.json', function(data){
    console.log(data);
  });
</script>

这回是真正地发送了ajax请求了,为什么跨域了还能请求?因为服务端设置好了。

澳门新萄京 1

而请求的json数据也是服务端帮你获取的。也就是说,客户端发送请求,服务端解析请求的url,然后服务器作为代理发送http请求去请求json数据(这时不存在客户端跨域),再返回给客户端作为回调的参数。

讲的比较细:
跨域笔记
    有些东西不要太较真,因为没啥用

前言

前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。

本文完整的源代码请猛戳GitHub博客,纸上得来终觉浅,建议动手敲敲代码

常见的跨域场景

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

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>

Easiest: jQuery Plugin

最简单的,我怎么感觉越来越复杂了…

略…

总结,因为要用第三方的服务器,所以既耗时又有不确定因素(比如服务器挂了),不合适用在真正项目中,自己玩玩尚可。

1 赞 收藏 评论

澳门新萄京 2

    jsonp和cors知道就好,其他的了解一下就好
  同源:是指同域名(主域名与二级域名,即子域名),同协议,同端口。是浏览器的一种最核心最基本的安全策略。

一、什么是跨域?

跨域资源共享 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 收藏 评论

澳门新萄京 3

    1."同源策略",即同域名(domain或ip)、同端口、同协议的才能互相获取资源,而不能访问其他域的资源。

1. 什么是同源策略及其限制内容?

同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议 域名 端口”三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

澳门新萄京 4

  • Cookie、LocalStorage、IndexedDB 等存储性内容

    • AJAX 请求不能发送

但是有三个标签是允许跨域加载资源:

  • <img src=XXX>

  • <link href=XXX>

  • <script src=XXX>

澳门新萄京 5
    2.jsonp跨域方式,就是利用script的src来变相发送get请求,在链接里会发送一个函数名,而json数据作为
函数的参数被回调函数传递过来再解析应用。

2. 常见跨域场景

当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。常见跨域场景如下图所示:

澳门新萄京 6

第一:如果是协议和端口造成的跨域问题“前台”是无能为力的。

第二:在跨域问题上,仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”。

这里你或许有个疑问:请求跨域了,那么请求到底发出去没有?

跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求,为什么 Ajax 就不会?因为归根结底,跨域是为了阻止用户读取到另一个域名下的内容,Ajax 可以获取响应,浏览器认为这不安全,所以拦截了响应。但是表单并不会获取新的内容,所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF,因为请求毕竟是发出去了。

//据研究:<script>、<a>、<img>、<iframe>等标签可以实现跨域,因为有src(a的href),可以获取外域的信息,src属性不受同源策略的限制,可以获取任何服务器上的脚本并执行。
    3.jsonp用jq实现,有两个方法:$.getJSON 和 $.ajax
//callback后面的?会由jquery自动生成方法名
$.getJSON('
    console.log(data.msg);
});
还有一种更常用的是:$.ajax,只要制定datatype为jsonp即可:
$.ajax({
    url: '
    dataType:‘jsonp’,
    jsonpCallback:‘demo’,//可省略
    success:function(data){
      console.log(data.msg);//msg是json数据中的一个name。以后可以是任何其他
    }
});
    
    4.jsonp缺点:
    ·没有关于调用错误的处理函数,失败会以浏览器默认方式处理
    ·只支持get请求。因此安全性不高
    5.json优点:支持老浏览器兼容,ie8以下也可以。
    6.CORS方式,针对高级浏览器。
通过修改document.domain为基础域名的方式来进行通信,但要注意协议和端口也必须相同、
    7.每个iframe都有包裹他的window对象,而这个window是最外层窗口的子对象,所以,window.name属性就可以被共享。
    8.CORS:跨域资源共享,w3c标准,支持兼容ie8,(IE8和IE9需要使用XDomainRequest对象来支持CORS)。主流的跨域解决方案
    9.CORS的核心思想是通过一系列新增的HTTP头信息来实现服务器和客户端之间的通信。【所以,需要服务端做好相应配置来配合前端】
    10.Origin头部:包含 请求页面的源信息(协议、域名和端口)。作用是让服务器根据这个头部信息来决定是否给予响应。
    11.Access-Control-Allow-Origin:请求可以接受时:服务器就会返回信息,在其头部中:发相同的对应的源信息(如果是公共资源,就发*。大部分情况,大家都喜欢直接写成*返回,*表示任意外域资源都可以访问,但这样安全性不高。)
    12.如果没有头部,或头部信息源不匹配,就会返回错误驳回请求。
    13.请求和响应都不包含cookie信息

二、跨域解决方案

1. jsonp

利用 <script> 标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

2) JSONP和AJAX对比

JSONP和AJAX相同,都是客户端向服务器端发送请求,从服务器端获取数据的方式。但AJAX属于同源策略,JSONP属于非同源策略

3) JSONP优缺点

JSONP优点是简单兼容性好,可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。

4) JSONP的实现流程

声明一个回调函数,其函数名当做参数值,要传递给跨域请求数据的服务器,函数形参为要获取目标数据(服务器返回的data)。

创建一个<script>标签,把那个跨域的API数据接口地址,赋值给script的src,还要在这个地址中向服务器传递该函数名(可以通过问号传参:?callback=show)。

  • 服务器接收到请求后,需要进行特殊的处理:把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如:传递进去的函数名是show,它准备好的数据是show

最后服务器把准备的数据通过HTTP协议返回给客户端,客户端再调用执行之前声明的回调函数,对返回的数据进行操作。

在开发中可能会遇到多个 JSONP 请求的回调函数名是相同的,这时候就需要自己封装一个 JSONP函数。

// index.htmlfunction jsonp({ url, params, callback }) { return new Promise((resolve, reject) => { let script = document.createElement window[callback] = function { resolve document.body.removeChild } params = { ...params, callback } // wd=b&callback=show let arrs = [] for (let key in params) { arrs.push(`${key}=${params[key]}`) } script.src = `${url}?${arrs.join}` document.body.appendChild })}jsonp({ url: '', params: { wd: 'Iloveyou' }, callback: 'show'}).then(data => { console.log

上面这段代码相当于向http://localhost:3000/say?wd=Iloveyou&callback=show这个地址请求数据,然后后台返回show,最后会运行show()这个函数,打印出’我不爱你’

// server.jslet express = require('express')let app = express()app.get('/say', function { let { wd, callback } = req.query console.log // Iloveyou console.log // show res.end(`${callback}})app.listen

5) jQuery的jsonp形式

JSONP都是GET和异步请求的,不存在其他的请求方式和同步请求,且jQuery默认就会给JSONP的请求清除缓存。

$.ajax({url:" {console.log;

2. cors

CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

浏览器会自动进行 CORS 通信,实现 CORS 通信的关键是后端。只要后端实现了 CORS,就实现了跨域。

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。

虽然设置 CORS 和前端没什么关系,但是通过这种方式解决跨域问题的话,会在发送请求时出现两种情况,分别为简单请求和复杂请求。

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

条件1:使用下列方法之一:


条件2:Content-Type 的值仅限于下列三者之一:

    • multipart/form-data
  • application/x-www-form-urlencoded

请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器; XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。

不符合以上条件的请求就肯定是复杂请求了。复杂请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为”预检”请求,该请求是 option 方法的,通过该请求来知道服务端是否允许跨域请求。

我们用PUT向后台请求时,属于复杂请求,后台需做如下配置:

// 允许哪个方法访问我res.setHeader('Access-Control-Allow-Methods', 'PUT')// 预检的存活时间res.setHeader('Access-Control-Max-Age', 6)// OPTIONS请求不做任何处理if (req.method === 'OPTIONS') { res.end() }// 定义后台返回的内容app.put('/getData', function { console.log(req.headers) res.end

接下来我们看下一个完整复杂请求的例子,并且介绍下CORS请求相关的字段

// index.htmllet xhr = new XMLHttpRequest()document.cookie = 'name=xiamen' // cookie不能跨域xhr.withCredentials = true // 前端设置是否带cookiexhr.open('PUT', '', true)xhr.setRequestHeader('name', 'xiamen')xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { console.log(xhr.response) //得到响应头,后台需设置Access-Control-Expose-Headers console.log(xhr.getResponseHeader } }}xhr.send()//server1.jslet express = require('express');let app = express();app.use(express.static(__dirname));app.listen;//server2.jslet express = require('express')let app = express()let whitList = ['] //设置白名单app.use(function(req, res, next) { let origin = req.headers.origin if (whitList.includes { // 设置哪个源可以访问我 res.setHeader('Access-Control-Allow-Origin', origin) // 允许携带哪个头访问我 res.setHeader('Access-Control-Allow-Headers', 'name') // 允许哪个方法访问我 res.setHeader('Access-Control-Allow-Methods', 'PUT') // 允许携带cookie res.setHeader('Access-Control-Allow-Credentials', true) // 预检的存活时间 res.setHeader('Access-Control-Max-Age', 6) // 允许返回的头 res.setHeader('Access-Control-Expose-Headers', 'name') if (req.method === 'OPTIONS') { res.end() // OPTIONS请求不做任何处理 } } nextapp.put('/getData', function { console.log(req.headers) res.setHeader('name', 'jw') //返回一个响应头,后台需设置 res.endapp.get('/getData', function { console.log(req.headers) res.endapp.use(express.static(__dirname))app.listen

上述代码由http://localhost:3000/index.htmlhttp://localhost:4000/跨域请求,正如我们上面所说的,后端是实现 CORS 通信的关键。

给大家推荐一个好用的BUG监控工具Fundebug,欢迎免费试用!

3. postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:

  • 页面和其打开的新窗口的数据传递

    • 页面与嵌套的iframe消息传递
  • 上面三个场景的跨域数据传递

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。

otherWindow.postMessage(message, targetOrigin, [transfer]);

  • message: 将要发送到其他 window的数据。

  • targetOrigin:通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串”*”或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。

  • transfer:是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。

接下来我们看个例子:http://localhost:3000/a.html页面向http://localhost:4000/b.html传递“我爱你”,然后后者传回”我不爱你”。

// a.html <iframe src="" frameborder="0" id="frame" onload="load()"></iframe> //等它加载完触发一个事件 //内嵌在 <script> function load() { let frame = document.getElementById frame.contentWindow.postMessage('我爱你', '') //发送数据 window.onmessage = function { //接受返回数据 console.log //我不爱你 } } </script>// b.html window.onmessage = function { console.log //我爱你 e.source.postMessage('我不爱你', e.origin) }

4. websocket

Websocket是HTML5的一个持久化的协议,它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议,都基于 TCP 协议。但是WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时,WebSocket 在建立连接时需要借助 HTTP 协议,连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

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

我们先来看个例子:本地文件socket.html向localhost:3000发生数据和接受数据

// socket.html<script> let socket = new WebSocket('ws://localhost:3000'); socket.onopen = function () { socket.send;//向服务器发送数据 } socket.onmessage = function { console.log;//接收服务器返回的数据 }</script>// server.jslet express = require('express');let app = express();let WebSocket = require;//记得安装wslet wss = new WebSocket.Server({port:3000});wss.on('connection',function { ws.on('message', function { console.log; ws.send });})

5. Node中间件代理

实现原理:同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略。代理服务器,需要做以下几个步骤:

    • 将请求 转发给服务器。
  • 拿到服务器 响应 数据。

  • 将 响应 转发给客户端。

澳门新萄京 7

我们先来看个例子:本地文件index.html文件,通过代理服务器http://localhost:3000向目标服务器http://localhost:4000请求数据。

// index.html() <script src="; <script> $.ajax({ url: '', type: 'post', data: { name: 'xiamen', password: '123456' }, contentType: 'application/json;charset=utf-8', success: function { console.log // {"title":"fontend","password":"123456"} }, error: function { console.log </script>// server1.js 代理服务器( http = require// 第一步:接受客户端请求const server = http.createServer((request, response) => { // 代理服务器,直接和浏览器直接交互,需要设置CORS 的首部字段 response.writeHead(200, { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': '*', 'Access-Control-Allow-Headers': 'Content-Type' }) // 第二步:将请求转发给服务器 const proxyRequest = http .request( { host: '127.0.0.1', port: 4000, url: '/', method: request.method, headers: request.headers }, serverResponse => { // 第三步:收到服务器的响应 var body = '' serverResponse.on('data', chunk => { body = chunk }) serverResponse.on => { console.log('The data is ' body) // 第四步:将响应结果转发给浏览器 response.end } ) .endserver.listen => { console.log('The proxyServer is running at server2.js( http = requireconst data = { title: 'fontend', password: '123456' }const server = http.createServer((request, response) => { if (request.url === '/') { response.end(JSON.stringify }})server.listen => { console.log('The server is running at )

上述代码经过两次跨域,值得注意的是浏览器向代理服务器发送请求,也遵循同源策略,最后在index.html文件打印出{"title":"fontend","password":"123456"}

6. nginx反向代理

实现原理类似于Node中间件代理,需要你搭建一个中转nginx服务器,用于转发请求。

使用nginx反向代理实现跨域,是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题,支持所有浏览器,支持session,不需要修改任何代码,并且不会影响服务器性能。

实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。

先下载nginx,然后将nginx目录下的nginx.conf修改如下:

// proxy服务器server { listen 81; server_name www.domain1.com; location / { proxy_pass ; #反向代理 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 ; #当前端只跨域不带cookie时,可为* add_header Access-Control-Allow-Credentials true; }}

最后通过命令行nginx -s reload启动nginx

// index.htmlvar xhr = new XMLHttpRequest();// 前端开关:浏览器是否读写cookiexhr.withCredentials = true;// 访问nginx中的代理服务器xhr.open('get', '', true);xhr.send();// server.jsvar http = require;var server = http.createServer();var qs = require('querystring');server.on('request', function { var params = qs.parse(req.url.substring; // 向前台写cookie res.writeHead(200, { 'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本无法读取 }); res.write(JSON.stringify; res.end;server.listen;console.log('Server is running at port 8080...');

7. window.name iframe

window.name属性的独特之处:name值在不同的页面加载后依旧存在,并且可以支持非常长的 name 值。

其中a.html和b.html是同域的,都是http://localhost:3000;而c.html是http://localhost:4000

// a.html() <iframe src="" frameborder="0" onload="load()" id="iframe"></iframe> <script> let first = true // onload事件会触发2次,第1次加载跨域页,并留存数据于window.name function load() { if{ // 第1次onload成功后,切换到同域代理页面 let iframe = document.getElementById; iframe.src = ''; first = false; }else{ // 第2次onload(同域b.html页)成功后,读取同域window.name中数据 console.log(iframe.contentWindow.name); } } </script>

b.html为中间代理页,与a.html同域,内容为空。

// c.html() <script> window.name = '我不爱你' </script>

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

8. location.hash iframe

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

具体实现步骤:一开始a.html给c.html传一个hash值,然后c.html收到hash值后,再把hash值传递给b.html,最后b.html将结果放到a.html的hash值中。同样的,a.html和b.html是同域的,都是http://localhost:3000;而c.html是http://localhost:4000

// a.html <iframe src="; <script> window.onhashchange = function () { //检测hash的变化 console.log(location.hash); } </script>// b.html <script> window.parent.parent.location.hash = location.hash //b.html将结果放到a.html的hash值中,b.html可通过parent.parent访问a.html页面 </script>// c.htmlconsole.log(location.hash); let iframe = document.createElement; iframe.src = ''; document.body.appendChild;

9. document.domain iframe

该方式只能用于二级域名相同的情况下,比如 a.test.com 和 b.test.com 适用于该方式。只需要给页面添加document.domain ='test.com'表示二级域名都相同就可以实现跨域。

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

我们看个例子:页面a.zf1.cn:3000/a.html获取页面b.zf1.cn:3000/b.html中a的值

// a.html<body> helloa <iframe src="" frameborder="0" onload="load()" id="frame"></iframe> <script> document.domain = 'zf1.cn' function load() { console.log(frame.contentWindow.a); } </script></body>// b.html<body> hellob <script> document.domain = 'zf1.cn' var a = 100; </script></body>

三、总结

  • CORS支持所有类型的HTTP请求,是跨域HTTP请求的根本解决方案

  • JSONP只支持GET请求,JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

  • 不管是Node中间件代理还是nginx反向代理,主要是通过同源策略对服务器不加限制。

  • 日常工作中,用得比较多的跨域方案是cors和nginx反向代理

参考文章

  • 跨域资源共享 CORS 详解

    • window.postMessage
    • 深入跨域问题 - 利用代理解决跨域

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京:不就是跨域么,学习笔记

上一篇:eval解析JSON字符串的一个小问题,函数使用方法 下一篇:没有了
猜你喜欢
热门排行
精彩图文