CORS 跨域资源共享

阅读 794
收藏 39
2017-01-16
原文链接:blog.haoduoyu.cc

概述

通过 XHR 实现 AJAX 通信的一个主要限制,来源于跨域安全策略。默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源( 浏览器的同源策略:如果协议,端口和主机都相同)。这种安全策略可以预防某些恶意行为。但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。

CORS(Cross-Origin Resource Sharing,跨域资源共享)是 W3C 的一个工作草案,定义了在必须访问跨源资源时,浏览器与服务器应该如何沟通。CORS 背后的的基本思想,就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应的成功和失败。

CORS 需要浏览器和服务器同时支持。目前,大部分浏览器都支持该功能 (浏览器支持情况)。CORS 通信与同源的 AJAX 通信没有差别。浏览器一旦发现 AJAX 请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨源通信。

访问控制场景

简单请求

所谓的简单,是指:

  • 只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据,则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-datatext/plain 中的一种
  • 不会使用自定义请求头(类似于 X-Modified 这种)

下面是一个使用简单请求的例子:

$.ajax({
   url: 'http://localhost:8002/listUsers',
   method: 'GET',
   success: function (data) {
       p.innerHTML = JSON.stringify(data);
       document.body.appendChild(p);
   }
});

Request Headers:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Host:localhost:8002
Origin:http://localhost:63343
Pragma:no-cache
Referer:http://localhost:63343/JsPractice/src/js/ajax/json.html?_ijt=4f3ur0duo147k993set7na2733
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36       

上面的头信息中,Origin 字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。
如果 Origin 指定的源,不在许可范围内,服务器会返回一个正常的 HTTP 回应。浏览器发现,这个回应的头信息没有包含 Access-Control-Allow-Origin 字段,就知道出错了,从而抛出一个错误,被 XMLHttpRequest 的 onerror 回调函数捕获。

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

如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。请看 Response Headers:

Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Length:1138
Content-Type:application/json; charset=utf-8
Date:Sun, 20 Nov 2016 07:57:09 GMT
X-Powered-By:Express

Access-Control-Allow-Origin 字段是必须的。它的值要么是请求时 Origin 字段的值,要么是一个 *,表示接受任意域名的请求。

完整的请求头和响应头参见HTTP访问控制(CORS)

非简单请求(预请求)

  • 请求以 GET, HEAD 或者 POST 以外的方法发起请求。或者,使用 POST,但请求数据为 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说,用 POST 发送数据类型为 application/xml 或者 text/xml 的 XML 数据的请求。
  • 使用自定义请求头(比如添加诸如 X-PINGOTHER)

不同于简单请求,“预请求”要求必须先发送一个 OPTIONS 请求给目的站点,来查明这个跨站请求对于目的站点是不是安全可接受的。

在服务器端我们可以进行如下设置允许跨域访问,但是我们应该根据合适的数据(用户代理,来源页面等)来决定是否设置 Access-Control-Allow-Origin 头部,以保证安全:

//设置跨域访问
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

####

其他跨域技术

JSONP

JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON )的简写,是应用 JSON 的一种新方法。JSONP 的原理非常简单,为了克服跨域问题,利用没有跨域限制的 script 标签加载预设的 callback 将内容传递给 JavaScript。

下面是一个典型的 JSONP 实例

function handleResponse(response){
      alert("You're at IP address " + response.ip + ", which is in " + response.city + ", " + response.region_name);
 }

 var script = document.createElement("script");
 script.src = "http://freegeoip.net/json/?callback=handleResponse";
 document.body.insertBefore(script, document.body.firstChild);

jQuery实现JSONP:

<script>
    function doSomething(jsonData) {
        alert('doSomething ' + jsonData.status);
    }
    $.ajax({
        type: "get",
        url: 'http://localhost:8002/jsonp',
        dataType: "jsonp",
        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback: "doSomething",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
        success: function (json) {
            alert(json.status);
        },
        error: function () {
            alert('fail');
        }
    });
</script>

服务端:

app.get('/jsonp', function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.jsonp({status: 'jsonpStatus'});
});    

window.name

window 对象有个 name 属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个 window.name 的,每个页面对 window.name 都有读写的权限,window.name 是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

a.html

<script>
    window.name = "我是页面a设置的值";
    setTimeout(function () {
        window.location = "b.html";
    })
</script>

b.html

<script>
    alert(window.name);
</script>

window.postMessage

window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

a.html

<script>
    function onLoad() {
        var iframe = document.getElementById('iframe');
        var win = iframe.contentWindow;
        win.postMessage("我来自页面a", "*");
    }
</script>
<iframe id="iframe" src="b.html" onload="onLoad()"></iframe>

b.html

<script>
    window.onmessage = function (e) {
        e = e || event;
        alert(e.data);
    }
</script>

参考资料:

JavaScript 高级程序设计 ch21
HTTP访问控制(CORS)
跨域资源共享 CORS 详解
Node.js express 跨域问题
js中几种实用的跨域方法原理详解
说说JSON和JSONP,也许你会豁然开朗,含jQuery用例

评论