转载

CORS跨域资源共享

介绍

CORS(Cross-Origin Resource Sharing)是指跨域资源共享,用于解决前端跨域问题。跨域问题最参见的方法就是使用 JSONP ,但是很多跨域问题 JSONP 是无法解决的,比如

  1. POST跨域请求

  2. 'script error' 的脚本错误提示

  3. canvas 中无法获得跨域图片的信息

    如果使用 CORS ,上面几个问题都可以解决。

CORS的原理

服务端对 header 设置一个 Access-Control-Allow-Origin: * ,开启跨域请求。 * 表示接受所有域名的请求。也可以指定特定的域名 Access-Control-Allow-Origin: http://www.client.com

我专门整理了一个使用 CORS 解决跨域的例子。可以去 github 上下载。

github 的例子中,需要设置 host , 将 www.client.comwww.server.com 都指向本地。然后使用本地服务器来测试。

127.0.0.1    www.client.com 127.0.0.1    www.server.com

其中 www.client.com 是指当前页面的域名, www.server.com 是第三方的域名。

CORS解决普通跨域请求

github的例子中, scripts/client.js 中对 www.server.com 域名发送 ajax 请求。当 www.server.com 没有对 headerAccess-Control-Allow-Origin 进行设置时,请求是报错的。如图:

设置 Access-Control-Allow-Origin 后,可以正常获得数据。如下图,第一张是返回的结果,第二张是 headers 信息。

CORS解决跨域脚本报错问题

同源策略影响到的不仅仅是 ajax 请求跨域接口,对跨域资源(包括js,图片等)也会有限制。比如 www.client.com 域名下页面请求了一个 www.server.com 域名下的 js 资源 server.jsjs 资源可以被正常加载和运行。但是当 js 资源中发生错误,有 error 抛出时, www.client.com 中是无法知道 error 的细节的。 demoindex.html 页面对 onerror 进行了处理,输出错误信息。但是当跨域资源 www.server.com/demo/cors/scripts/server.js 中抛出异常时,只能显示 'script error' 信息。如图:

要支持跨域脚本 error 信息的输出,需要两步:

  1. 服务器对 js 资源的 headerAccess-Control-Allow-Origin 的设置

  2. script 标签中添加属性 crossorigin="anonymous"
    加上上面的逻辑后,错误信息就可以正常输出了:

CORS解决跨域图片信息获取

图片作为一种资源,也会受到同源策略的影响。比如, www.client.com 域名下的页面,通过 canvas 绘制了一个 www.server.com 域名的图片,当使用 canvastoBlob() , toDataURL() , getImageData() 时,会有 error 发生。如图:

如果对图片的 header 设置了 Access-Control-Allow-Origin ,就可以正常调用这些方法。

正文到此结束
Loading...