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进行设置时,请求是报错的。如图:

ajax跨域请求报错

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

clipboard.png

clipboard.png

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'信息。如图:

clipboard.png

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

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

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

clipboard.png

CORS解决跨域图片信息获取

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

clipboard.png

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

阅读 4.4k

推荐阅读
chenhao.ch
用户专栏

37 人关注
18 篇文章
专栏主页