Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

Dear 丶 2022-08-18 14:21 353阅读 0赞

同源是指相同的协议、域名、端口，三者都相同才属于同域。不符合上述定义的请求，则称为跨域。

相信每个开发人员都曾遇到过跨域请求的情况，虽然情况不一样，但问题的本质都可以归为浏览器出于安全考虑下的同源策略的限制。

跨域的情形有很多，最常见的有Ajax跨域、Socket跨域和Canvas跨域。下面列举一些我们常见的跨域情形下，某些浏览器控制台给出的错误提示：

FireFox下的提示：

已阻止交叉源请求：同源策略不允许读取\*\*\*上的远程资源。可以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。

Canvas跨域Chrome下的提示：

UncaughtSecurityError:Failed to execute'getImageData' on 'CanvasRenderingContext2D':The canvas has been taintedby cross-origin data.

或：

Imagefrom origin 'http://js.xx.com' has been blocked from loading by Cross-OriginResource Sharing policy: No 'Access-Control-Allow-Origin' header is present onthe requested resource. Origin 'http://act.xx.com' is therefore not allowedaccess.

![SouthEast][]

网上有许多解决跨域的方法，大体上有这几种：

1）document.domain+iframe的设置

2）动态创建script

3）利用iframe和location.hash

4）window.name实现的跨域数据传输

5）使用HTML5 postMessage

6）利用flash

7）通过代理，js访问代理，代理转到不同的域

[http://developer.yahoo.com/javascript/howto-proxy.html][http_developer.yahoo.com_javascript_howto-proxy.html]

8）Jquery JSONP(不能成为真正的Ajax，本质上仍是动态创建script)

[http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html][http_www.cnblogs.com_chopper_archive_2012_03_24_2403945.html]

9）跨域资源共享（CORS） 这是HTML5跨域问题的标准解决方案

说明：方案1~方案6见Rain Man所写的文章《JavaScript跨域总结与解决办法》

[http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html][http_www.cnblogs.com_rainman_archive_2011_02_20_1959325.html]

下面主要就我总结的几种解决跨域的方法，展开说一下。

1）  绕开跨域。

适用情形是：动静分离。

example1.com域名下的页面中跨域请求是以JavaScript内联方式实现的，而请求的目标静态资源是放在example2.com域名下，这时可以将执行跨域请求的JavaScript代码块独立出来，放到example2.com上，而example1.com页面通过外联方式引入该静态域名下的js文件。这样，js与请求的图片等资源都在example2.com下，即可正常访问到。这种方法其实是一种巧妙避开跨域的方法。

2）  后台抓取克隆图片。

适用情形：动静不分离（两个域名均运行访问静态资源）。

example1.com请求example2.com下的资源图片，可以使用PHP抓取图片并在example2.com下生成一份，这样就可以间接访问到example1.com的静态资源。

html模板示例代码：

$("\#scratchpad").wScratchPad(\{     //刮刮卡示例，当前域名http://act.xxx.com

width:283,

height:154,

//color: "\#a9a9a7",

image2:"imgdata.php?url=http://js.xxx.com/static/activity/sq/guagua315/images/card\_inner.jpg",

scratchMove:function() \{

\});

或：

xi=newXMLHttpRequest();

xi.open("GET","imgdata.php?url="\+yourImageURL,true);

xi.send();

xi.onreadystatechange=function() \{

if(xi.readyState==4 && xi.status==200) \{

img=newImage;

img.οnlοad=function()\{

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

img.src=xi.responseText;

PHP处理代码：

<?php//imgdata.php

$url=$\_GET\['url'\];

$img =file\_get\_contents($url);

$imgname = substr(strrchr($url,"/"),1);

file\_put\_contents($fn,$img);

echo $imgname;

上述代码在当前php目录下生成了克隆生成了一张图片。

3）  后台程序设置Access-Control-Allow-Origin

适用情形：Ajax获取跨域接口的JSON数据。

example1.com请求example2.com的数据接口，则需要在example2.com的数据接口添加跨域访问授权。

PHP程序中开始出添加*header*('HeaderName:*Header*Value'); 这样的header标记：

header('Access-Control-Allow-Origin:\*');

4）修改服务器配置启用CORS

适用情形：跨域访问静态资源。

Access-Control-Allow-Origin是什么作用呢？用于授权资源的跨站访问。比如,静态资源图片都放在example2.com 域名下, 如果在返回的头中没有设置 Access-Control-Allow-Origin , 那么别的域是没有权限外链你的图片的。

要实现CORS跨域，服务端需要这个一个流程，图片引自[html5rocks][]，附图如下

![20150312163637121][]

a.      对于简单请求，如GET，只需要在HTTP Response后添加Access-Control-Allow-Origin。

b.      对于非简单请求，比如POST、PUT、DELETE等，浏览器会分两次应答。第一次preflight（method: OPTIONS），主要验证来源是否合法，并返回允许的Header等。第二次才是真正的HTTP应答。所以服务器必须处理OPTIONS应答。

这里是一个nginx启用CORS的参考配置示例[http://enable-cors.org/server\_nginx.html][http_enable-cors.org_server_nginx.html]。代码：

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#  
2.  \# A CORS (Cross-Origin Resouce Sharing) config for nginx  
3.  \#  
4.  \# == Purpose  
5.  \#  
6.  \# This nginx configuration enables CORS requests in the following way:  
7.  \# - enables CORS just for origins on a whitelist specified by a regular expression  
8.  \# - CORS preflight request (OPTIONS) are responded immediately  
9.  \# - Access-Control-Allow-Credentials=true for GET and POST requests  
10. \# - Access-Control-Max-Age=20days, to minimize repetitive OPTIONS requests  
11. \# - various superluous settings to accommodate nonconformant browsers  
12. \#  
13. \# == Comment on echoing Access-Control-Allow-Origin  
14. \#   
15. \# How do you allow CORS requests only from certain domains? The last  
16. \# published W3C candidate recommendation states that the  
17. \# Access-Control-Allow-Origin header can include a list of origins.  
18. \# (See: http://www.w3.org/TR/2013/CR-cors-20130129/\#access-control-allow-origin-response-header )  
19. \# However, browsers do not support this well and it likely will be  
20. \# dropped from the spec (see, http://www.rfc-editor.org/errata\_search.php?rfc=6454&eid=3249 ).  
21. \#   
22. \# The usual workaround is for the server to keep a whitelist of  
23. \# acceptable origins (as a regular expression), match the request's  
24. \# Origin header against the list, and echo back the matched value.  
25. \#  
26. \# (Yes you can use '\*' to accept all origins but this is too open and  
27. \# prevents using 'Access-Control-Allow-Credentials: true', which is  
28. \# needed for HTTP Basic Access authentication.)  
29. \#  
30. \# == Comment on  spec  
31. \#  
32. \# Comments below are all based on my reading of the CORS spec as of  
33. \# 2013-Jan-29 ( http://www.w3.org/TR/2013/CR-cors-20130129/ ), the  
34. \# XMLHttpRequest spec (  
35. \# http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/ ), and  
36. \# experimentation with latest versions of Firefox, Chrome, Safari at  
37. \# that point in time.  
38. \#  
39. \# == Changelog  
40. \#  
41. \# shared at: https://gist.github.com/algal/5480916  
42. \# based on: https://gist.github.com/alexjs/4165271  
43. \#  
44.   
45. location / \{  
46.   
47.     \# if the request included an Origin: header with an origin on the whitelist,  
48.     \# then it is some kind of CORS request.  
49.   
50.     \# specifically, this example allow CORS requests from  
51.     \#  scheme    : http or https  
52.     \#  authority : any authority ending in ".mckinsey.com"  
53.     \#  port      : nothing, or :  
54.     if ($http\_origin ~\* (https?://\[^/\]\*\\.mckinsey\\.com(:\[0-9\]+)?)$) \{  
55.         set $cors "true";  
56.     \}  
57.   
58.     \# Nginx doesn't support nested If statements, so we use string  
59.     \# concatenation to create a flag for compound conditions  
60.   
61.     \# OPTIONS indicates a CORS pre-flight request  
62.     if ($request\_method = 'OPTIONS') \{  
63.         set $cors "$\{cors\}options";    
64.     \}  
65.   
66.     \# non-OPTIONS indicates a normal CORS request  
67.     if ($request\_method = 'GET') \{  
68.         set $cors "$\{cors\}get";    
69.     \}  
70.     if ($request\_method = 'POST') \{  
71.         set $cors "$\{cors\}post";  
72.     \}  
73.   
74.     \# if it's a GET or POST, set the standard CORS responses header  
75.     if ($cors = "trueget") \{  
76.         \# Tells the browser this origin may make cross-origin requests  
77.         \# (Here, we echo the requesting origin, which matched the whitelist.)  
78.         add\_header 'Access-Control-Allow-Origin' "$http\_origin";  
79.         \# Tells the browser it may show the response, when XmlHttpRequest.withCredentials=true.  
80.         add\_header 'Access-Control-Allow-Credentials' 'true';  
81.         \# \# Tell the browser which response headers the JS can see, besides the "simple response headers"  
82.         \# add\_header 'Access-Control-Expose-Headers' 'myresponseheader';  
83.     \}  
84.   
85.     if ($cors = "truepost") \{  
86.         \# Tells the browser this origin may make cross-origin requests  
87.         \# (Here, we echo the requesting origin, which matched the whitelist.)  
88.         add\_header 'Access-Control-Allow-Origin' "$http\_origin";  
89.         \# Tells the browser it may show the response, when XmlHttpRequest.withCredentials=true.  
90.         add\_header 'Access-Control-Allow-Credentials' 'true';  
91.         \# \# Tell the browser which response headers the JS can see, besides the "simple response headers"  
92.         \# add\_header 'Access-Control-Expose-Headers' 'myresponseheader';  
93.     \}  
94.   
95.     \# if it's OPTIONS, then it's a CORS preflight request so respond immediately with no response body  
96.     if ($cors = "trueoptions") \{  
97.         \# Tells the browser this origin may make cross-origin requests  
98.         \# (Here, we echo the requesting origin, which matched the whitelist.)  
99.         add\_header 'Access-Control-Allow-Origin' "$http\_origin";  
100.         \# in a preflight response, tells browser the subsequent actual request can include user credentials (e.g., cookies)  
101.         add\_header 'Access-Control-Allow-Credentials' 'true';  
102.   
103.         \#  
104.         \# Return special preflight info  
105.         \#  
106.           
107.         \# Tell browser to cache this pre-flight info for 20 days  
108.         add\_header 'Access-Control-Max-Age' 1728000;  
109.   
110.         \# Tell browser we respond to GET,POST,OPTIONS in normal CORS requests.  
111.         \#  
112.         \# Not officially needed but still included to help non-conforming browsers.  
113.         \#  
114.         \# OPTIONS should not be needed here, since the field is used  
115.         \# to indicate methods allowed for "actual request" not the  
116.         \# preflight request.  
117.         \#  
118.         \# GET,POST also should not be needed, since the "simple  
119.         \# methods" GET,POST,HEAD are included by default.  
120.         \#  
121.         \# We should only need this header for non-simple requests  
122.         \# methods (e.g., DELETE), or custom request methods (e.g., XMODIFY)  
123.         add\_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  
124.           
125.         \# Tell browser we accept these headers in the actual request  
126.         \#  
127.         \# A dynamic, wide-open config would just echo back all the headers  
128.         \# listed in the preflight request's  
129.         \# Access-Control-Request-Headers.  
130.         \#  
131.         \# A dynamic, restrictive config, would just echo back the  
132.         \# subset of Access-Control-Request-Headers headers which are  
133.         \# allowed for this resource.  
134.         \#  
135.         \# This static, fairly open config just returns a hardcoded set of  
136.         \# headers that covers many cases, including some headers that  
137.         \# are officially unnecessary but actually needed to support  
138.         \# non-conforming browsers  
139.         \#   
140.         \# Comment on some particular headers below:  
141.         \#  
142.         \# Authorization -- practically and officially needed to support  
143.         \# requests using HTTP Basic Access authentication. Browser JS  
144.         \# can use HTTP BA authentication with an XmlHttpRequest object  
145.         \# req by calling  
146.         \#   
147.         \#   req.withCredentials=true,  and  
148.         \#   req.setRequestHeader('Authorization','Basic ' + window.btoa(theusername + ':' + thepassword))  
149.         \#  
150.         \# Counterintuitively, the username and password fields on  
151.         \# XmlHttpRequest\#open cannot be used to set the authorization  
152.         \# field automatically for CORS requests.  
153.         \#  
154.         \# Content-Type -- this is a "simple header" only when it's  
155.         \# value is either application/x-www-form-urlencoded,  
156.         \# multipart/form-data, or text/plain; and in that case it does  
157.         \# not officially need to be included. But, if your browser  
158.         \# code sets the content type as application/json, for example,  
159.         \# then that makes the header non-simple, and then your server  
160.         \# must declare that it allows the Content-Type header.  
161.         \#   
162.         \# Accept,Accept-Language,Content-Language -- these are the  
163.         \# "simple headers" and they are officially never  
164.         \# required. Practically, possibly required.  
165.         \#  
166.         \# Origin -- logically, should not need to be explicitly  
167.         \# required, since it's implicitly required by all of  
168.         \# CORS. officially, it is unclear if it is required or  
169.         \# forbidden! practically, probably required by existing  
170.         \# browsers (Gecko does not request it but WebKit does, so  
171.         \# WebKit might choke if it's not returned back).  
172.         \#  
173.         \# User-Agent,DNT -- officially, should not be required, as  
174.         \# they cannot be set as "author request headers". practically,  
175.         \# may be required.  
176.         \#   
177.         \# My Comment:  
178.         \#  
179.         \# The specs are contradictory, or else just confusing to me,  
180.         \# in how they describe certain headers as required by CORS but  
181.         \# forbidden by XmlHttpRequest. The CORS spec says the browser  
182.         \# is supposed to set Access-Control-Request-Headers to include  
183.         \# only "author request headers" (section 7.1.5). And then the  
184.         \# server is supposed to use Access-Control-Allow-Headers to  
185.         \# echo back the subset of those which is allowed, telling the  
186.         \# browser that it should not continue and perform the actual  
187.         \# request if it includes additional headers (section 7.1.5,  
188.         \# step 8). So this implies the browser client code must take  
189.         \# care to include all necessary headers as author request  
190.         \# headers.  
191.         \#   
192.         \# However, the spec for XmlHttpRequest\#setRequestHeader  
193.         \# (section 4.6.2) provides a long list of headers which the  
194.         \# the browser client code is forbidden to set, including for  
195.         \# instance Origin, DNT (do not track), User-Agent, etc.. This  
196.         \# is understandable: these are all headers that we want the  
197.         \# browser itself to control, so that malicious browser client  
198.         \# code cannot spoof them and for instance pretend to be from a  
199.         \# different origin, etc..  
200.         \#  
201.         \# But if XmlHttpRequest forbids the browser client code from  
202.         \# setting these (as per the XmlHttpRequest spec), then they  
203.         \# are not author request headers. And if they are not author  
204.         \# request headers, then the browser should not include them in  
205.         \# the preflight request's Access-Control-Request-Headers. And  
206.         \# if they are not included in Access-Control-Request-Headers,  
207.         \# then they should not be echoed by  
208.         \# Access-Control-Allow-Headers. And if they are not echoed by  
209.         \# Access-Control-Allow-Headers, then the browser should not  
210.         \# continue and execute actual request. So this seems to imply  
211.         \# that the CORS and XmlHttpRequest specs forbid certain  
212.         \# widely-used fields in CORS requests, including the Origin  
213.         \# field, which they also require for CORS requests.  
214.         \#  
215.         \# The bottom line: it seems there are headers needed for the  
216.         \# web and CORS to work, which at the moment you should  
217.         \# hard-code into Access-Control-Allow-Headers, although  
218.         \# official specs imply this should not be necessary.  
219.         \#   
220.         add\_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';  
221.   
222.         \# build entire response to the preflight request  
223.         \# no body in this response  
224.         add\_header 'Content-Length' 0;  
225.         \# (should not be necessary, but included for non-conforming browsers)  
226.         add\_header 'Content-Type' 'text/plain charset=UTF-8';  
227.         \# indicate successful return with no content  
228.         return 204;  
229.     \}  
230.     \# --PUT YOUR REGULAR NGINX CODE HERE--  
231. \}  
232.

服务器解析流程如下：

a.首先查看http头部有无origin字段；

b.如果没有，或者不允许，直接当成普通请求处理，结束；

c.如果有并且是允许的，那么再看是否是preflight(method=OPTIONS)；

d.如果是preflight，就返回Allow-Headers、Allow-Methods等，内容为空；

e.如果不是preflight，就返回Allow-Origin、Allow-Credentials等，并返回正常内容。

若服务器为nginx，可以 在 nginx 的 conf 文件中加入以下内容：

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  location / \{  
2.    add\_header Access-Control-Allow-Origin \*;  
3.  \}

若服务器为Apache，则可以按照如下配置：

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <IfModule mod\_setenvif.c>  
2.      <IfModule mod\_headers.c>  
3.          <FilesMatch "\\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">  
4.              SetEnvIf Origin ":" IS\_CORS  
5.              Header set Access-Control-Allow-Origin "\*" env=IS\_CORS  
6.          </FilesMatch>  
7.      </IfModule>  
8.  </IfModule>

为安全起见，Access-Control-Allow-Origin也可设为特定域名的方式。

在HTML5中，有些HTML元素为CORS提供了支持，如img、video新增了crossOrigin属性，属性值可以为anonymous或use-credentials。比如，canvas绘图要用到跨域图片，在JavaScript中要设置img.crossOrigin="Anonymous";

**\[javascript\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **var** img = **new** Image,  
2.      canvas = document.createElement("canvas"),  
3.      ctx = canvas.getContext("2d"),  
4.      src = "http://example.com/image"; // insert image url here  
5.    
6.  img.crossOrigin = "Anonymous";  
7.    
8.  img.onload = **function**() \{  
9.      canvas.width = img.width;  
10.     canvas.height = img.height;  
11.     ctx.drawImage( img, 0, 0 );  
12.     localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );  
13. \}  
14. img.src = src;  
15. // make sure the load event fires for cached images too  
16. **if** ( img.complete || img.complete === undefined ) \{  
17.     img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";  
18.     img.src = src;  
19. \}

上述配置完成后，重启服务器，CORS启用。

然后我们再刷新页面，查询请求头的参数，可以发现多出一个：Access-Control-Allow-Origin:\*

，到此证明服务器配置已经生效。同时我们的canvas绘图也可以正常使用了。

刷新页面返回请求响应结果后，HTTP Request Headers的内容：

Remote Address:222.132.18.xx:80

Request URL:http://js.xx.com/static/activity/sq/guagua315/images/card\_inner.jpg

Request Method:GET

Status Code:200 OK

Request Headersview source

Accept:image/webp,\*/\*;q=0.8

Accept-Encoding:gzip, deflate, sdch

Accept-Language:zh-CN,zh;q=0.8

Cache-Control:no-cache

Connection:keep-alive

Host:js.xx.com

Origin:http://act.xx.com

Pragma:no-cache

RA-Sid:7CCAD53E-20140704-054839-03c57a-85faf2

RA-Ver:2.8.8

Referer:http://act.xx.com/sq/guagua315?uuid=46124642&fid=2&sign=xxx

User-Agent:Mozilla/5.0 (Windows NT 6.1;WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115Safari/537.36

Response Headersview source

Accept-Ranges:bytes

Access-Control-Allow-Origin:\*

Connection:close

Content-Length:4010

Content-Type:image/jpeg

Date:Thu, 12 Mar 2015 02:29:43 GMT

ETag:"54f7d1b4-faa"

Last-Modified:Thu, 05 Mar 2015 03:47:00 GMT

Powered-By-ChinaCache:MISS fromCNC-WF-3-3X6

Powered-By-ChinaCache:MISS fromCNC-WF-3-3X5

Server:Tengine

Switch:FSCS

附图：

![SouthEast 1][]

参考文章：

CORS enabled image  [https://developer.mozilla.org/en-US/docs/Web/HTML/CORS\_enabled\_image][https_developer.mozilla.org_en-US_docs_Web_HTML_CORS_enabled_image]

CORS on Nginx   [http://enable-cors.org/server\_nginx.html][http_enable-cors.org_server_nginx.html]

Nginx CORS实现JS跨域  [http://blog.csdn.net/oyzl68/article/details/18741057][http_blog.csdn.net_oyzl68_article_details_18741057]

源引：[http://blog.csdn.net/freshlover/article/details/44223467][http_blog.csdn.net_freshlover_article_details_44223467]

[SouthEast]: /images/20220731/b957f3b9fd1441e2a69cd11bc6a8a377.png
[http_developer.yahoo.com_javascript_howto-proxy.html]: http://developer.yahoo.com/javascript/howto-proxy.html
[http_www.cnblogs.com_chopper_archive_2012_03_24_2403945.html]: http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html
[http_www.cnblogs.com_rainman_archive_2011_02_20_1959325.html]: http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
[html5rocks]: http://www.html5rocks.com/static/images/cors_server_flowchart.png
[20150312163637121]: /images/20220731/c0630ce25b234984b30be2d8392dd08f.png
[http_enable-cors.org_server_nginx.html]: http://enable-cors.org/server_nginx.html
[view plain]: http://blog.csdn.net/freshlover/article/details/44223467#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/617897
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/617897/fork
[SouthEast 1]: /images/20220731/ab254f4e8ef44cb59fb455d5d27c2a32.png
[https_developer.mozilla.org_en-US_docs_Web_HTML_CORS_enabled_image]: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
[http_blog.csdn.net_oyzl68_article_details_18741057]: http://blog.csdn.net/oyzl68/article/details/18741057
[http_blog.csdn.net_freshlover_article_details_44223467]: http://blog.csdn.net/freshlover/article/details/44223467