介绍
CORS(Cross-Origin Resource Sharing)是指跨域资源共享,用于解决前端跨域问题。跨域问题最参见的方法就是使用JSONP
,但是很多跨域问题JSONP
是无法解决的,比如
POST跨域请求
'script error'
的脚本错误提示canvas
中无法获得跨域图片的信息
如果使用CORS
,上面几个问题都可以解决。
CORS的原理
服务端对header
设置一个Access-Control-Allow-Origin: *
,开启跨域请求。*
表示接受所有域名的请求。也可以指定特定的域名 Access-Control-Allow-Origin: http://www.client.com
。
我专门整理了一个使用CORS
解决跨域的例子。可以去github上下载。
在github
的例子中,需要设置host
, 将www.client.com
和www.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
没有对header
的Access-Control-Allow-Origin
进行设置时,请求是报错的。如图:
设置Access-Control-Allow-Origin
后,可以正常获得数据。如下图,第一张是返回的结果,第二张是headers
信息。
CORS解决跨域脚本报错问题
同源策略影响到的不仅仅是ajax
请求跨域接口,对跨域资源(包括js,图片等)也会有限制。比如www.client.com
域名下页面请求了一个www.server.com
域名下的js
资源server.js
,js
资源可以被正常加载和运行。但是当js
资源中发生错误,有error
抛出时,www.client.com
中是无法知道error
的细节的。demo
中index.html
页面对onerror
进行了处理,输出错误信息。但是当跨域资源www.server.com/demo/cors/scripts/server.js
中抛出异常时,只能显示'script error'
信息。如图:
要支持跨域脚本error
信息的输出,需要两步:
服务器对
js
资源的header
做Access-Control-Allow-Origin
的设置script
标签中添加属性crossorigin="anonymous"
加上上面的逻辑后,错误信息就可以正常输出了:
CORS解决跨域图片信息获取
图片作为一种资源,也会受到同源策略的影响。比如,www.client.com
域名下的页面,通过canvas
绘制了一个www.server.com
域名的图片,当使用canvas
的toBlob()
, toDataURL()
, getImageData()
时,会有error
发生。如图:
如果对图片的header
设置了Access-Control-Allow-Origin
,就可以正常调用这些方法。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。