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

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

跨域的情形有很多，最常见的有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.


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

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

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

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

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

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.onload=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:HeaderValue'); 这样的header标记：

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

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

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

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

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

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。代码：

[plain] view plain copy
  1. #
  2. #ACORS(Cross-OriginResouceSharing)configforNginx
  3. #
  4. #==Purpose
  5. #
  6. #ThisNginxconfigurationenablesCORSrequestsinthefollowingway:
  7. #-enablesCORSjustfororiginsonawhitelistspecifiedbyaregularexpression
  8. #-CORSpreflightrequest(OPTIONS)arerespondedimmediately
  9. #-Access-Control-Allow-Credentials=trueforGETandPOSTrequests
  10. #-Access-Control-Max-Age=20days,tominimizerepetitiveOPTIONSrequests
  11. #-varIoUssuperluoussettingstoaccommodatenonconformantbrowsers
  12. #
  13. #==CommentonechoingAccess-Control-Allow-Origin
  14. #
  15. #HowdoyouallowCORSrequestsonlyfromcertaindomains?Thelast
  16. #publishedW3Ccandidaterecommendationstatesthatthe
  17. #Access-Control-Allow-Originheadercanincludealistoforigins.
  18. #(See:http://www.w3.org/TR/2013/CR-cors-20130129/#access-control-allow-origin-response-header)
  19. #However,browsersdonotsupportthiswellanditlikelywillbe
  20. #droppedfromthespec(see,http://www.rfc-editor.org/errata_search.PHP?rfc=6454&eid=3249).
  21. #
  22. #Theusualworkaroundisfortheservertokeepawhitelistof
  23. #acceptableorigins(asaregularexpression),matchtherequest's
  24. #Originheaderagainstthelist,andechobackthematchedvalue.
  25. #
  26. #(Yesyoucanuse'*'toacceptalloriginsbutthisistooopenand
  27. #preventsusing'Access-Control-Allow-Credentials:true',whichis
  28. #neededforHTTPBasicAccessauthentication.)
  29. #
  30. #==Commentonspec
  31. #
  32. #CommentsbelowareallbasedonmyreadingoftheCORSSpecasof
  33. #2013-Jan-29(http://www.w3.org/TR/2013/CR-cors-20130129/),the
  34. #XMLHttpRequestspec(
  35. #http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/),and
  36. #experimentationwithlatestversionsofFirefox,Chrome,Safariat
  37. #thatpointintime.
  38. #
  39. #==Changelog
  40. #
  41. #sharedat:https://gist.github.com/algal/5480916
  42. #basedon:https://gist.github.com/alexjs/4165271
  43. #
  45. location/{
  47. #iftherequestincludedanOrigin:headerwithanoriginonthewhitelist,
  48. #thenitissomekindofCORSrequest.
  50. #specifically,thisexampleallowCORSrequestsfrom
  51. #scheme:httporhttps
  52. #authority:anyauthorityendingin".mckinsey.com"
  53. #port:nothing,or:
  54. if($http_origin~*(https?://[^/]*\.mckinsey\.com(:[0-9]+)?)$){
  55. set$cors"true";
  56. }
  58. #Nginxdoesn'tsupportnestedIfstatements,soweusestring
  59. #concatenationtocreateaflagforcompoundconditions
  61. #OPTIONSindicatesaCORSpre-flightrequest
  62. if($request_method='OPTIONS'){
  63. set$cors"${cors}options";
  64. }
  66. #non-OPTIONSindicatesanormalCORSrequest
  67. if($request_method='GET'){
  68. set$cors"${cors}get";
  69. }
  70. if($request_method='POST'){
  71. set$cors"${cors}post";
  72. }
  74. #ifit'saGETorPOST,setthestandardCORSresponsesheader
  75. if($cors="trueget"){
  76. #Tellsthebrowserthisoriginmaymakecross-originrequests
  77. #(Here,weechotherequestingorigin,whichmatchedthewhitelist.)
  78. add_header'Access-Control-Allow-Origin'"$http_origin";
  79. #Tellsthebrowseritmayshowtheresponse,whenXmlHttpRequest.withCredentials=true.
  80. add_header'Access-Control-Allow-Credentials''true';
  81. ##TellthebrowserwhichresponseheaderstheJScansee,besidesthe"simpleresponseheaders"
  82. #add_header'Access-Control-Expose-Headers''myresponseheader';
  83. }
  85. if($cors="truepost"){
  86. #Tellsthebrowserthisoriginmaymakecross-originrequests
  87. #(Here,besidesthe"simpleresponseheaders"
  88. #add_header'Access-Control-Expose-Headers''myresponseheader';
  89. }
  91. #ifit'sOPTIONS,thenit'saCORSpreflightrequestsorespondimmediatelywithnoresponsebody
  92. if($cors="trueoptions"){
  93. #Tellsthebrowserthisoriginmaymakecross-originrequests
  94. #(Here,whichmatchedthewhitelist.)
  95. add_header'Access-Control-Allow-Origin'"$http_origin";
  96. #inapreflightresponse,tellsbrowserthesubsequentactualrequestcanincludeusercredentials(e.g.,cookies)
  97. add_header'Access-Control-Allow-Credentials''true';
  99. #
  100. #Returnspecialpreflightinfo
  101. #
  103. #Tellbrowsertocachethispre-flightinfofor20days
  104. add_header'Access-Control-Max-Age'1728000;
  106. #TellbrowserwerespondtoGET,POST,OPTIONSinnormalCORSrequests.
  107. #
  108. #Notofficiallyneededbutstillincludedtohelpnon-conformingbrowsers.
  109. #
  110. #OPTIONSshouldnotbeneededhere,sincethefieldisused
  111. #toindicatemethodsallowedfor"actualrequest"notthe
  112. #preflightrequest.
  113. #
  114. #GET,POSTalsoshouldnotbeneeded,sincethe"simple
  115. #methods"GET,HEADareincludedbydefault.
  116. #
  117. #Weshouldonlyneedthisheaderfornon-simplerequests
  118. #methods(e.g.,DELETE),orcustomrequestmethods(e.g.,XMODIFY)
  119. add_header'Access-Control-Allow-Methods''GET,OPTIONS';
  121. #Tellbrowserweaccepttheseheadersintheactualrequest
  122. #
  123. #Adynamic,wide-openconfigwouldjustechobackalltheheaders
  124. #listedinthepreflightrequest's
  125. #Access-Control-Request-Headers.
  126. #
  127. #Adynamic,restrictiveconfig,wouldjustechobackthe
  128. #subsetofAccess-Control-Request-Headersheaderswhichare
  129. #allowedforthisresource.
  130. #
  131. #Thisstatic,fairlyopenconfigjustreturnsahardcodedsetof
  132. #headersthatcoversmanycases,includingsomeheadersthat
  133. #areofficiallyunnecessarybutactuallyneededtosupport
  134. #non-conformingbrowsers
  135. #
  136. #Commentonsomeparticularheadersbelow:
  137. #
  138. #Authorization--practicallyandofficiallyneededtosupport
  139. #requestsusingHTTPBasicAccessauthentication.BrowserJS
  140. #canuseHTTPBAauthenticationwithanXmlHttpRequestobject
  141. #reqbycalling
  142. #
  143. #req.withCredentials=true,and
  144. #req.setRequestHeader('Authorization','Basic'+window.btoa(theusername+':'+thepassword))
  145. #
  146. #Counterintuitively,theusernameandpasswordfieldson
  147. #XmlHttpRequest#opencannotbeusedtosettheauthorization
  148. #fieldautomaticallyforCORSrequests.
  149. #
  150. #Content-Type--thisisa"simpleheader"onlywhenit's
  151. #valueiseitherapplication/x-www-form-urlencoded,
  152. #multipart/form-data,ortext/plain;andinthatcaseitdoes
  153. #notofficiallyneedtobeincluded.But,ifyourbrowser
  154. #codesetsthecontenttypeasapplication/json,forexample,
  155. #thenthatmakestheheadernon-simple,andthenyourserver
  156. #mustdeclarethatitallowstheContent-Typeheader.
  157. #
  158. #Accept,Accept-Language,Content-Language--thesearethe
  159. #"simpleheaders"andtheyareofficiallynever
  160. #required.Practically,possiblyrequired.
  161. #
  162. #Origin--logically,shouldnotneedtobeexplicitly
  163. #required,sinceit'simplicitlyrequiredbyallof
  164. #CORS.officially,itisunclearifitisrequiredor
  165. #forbidden!practically,probablyrequiredbyexisting
  166. #browsers(GeckodoesnotrequestitbutWebKitdoes,so
  167. #WebKitmightchokeifit'snotreturnedback).
  168. #
  169. #User-Agent,DNT--officially,shouldnotberequired,as
  170. #theycannotbesetas"authorrequestheaders".practically,
  171. #mayberequired.
  172. #
  173. #MyComment:
  174. #
  175. #Thespecsarecontradictory,orelsejustconfusingtome,
  176. #inhowtheydescribecertainheadersasrequiredbyCORSbut
  177. #forbiddenbyXmlHttpRequest.TheCORSSpecsaysthebrowser
  178. #issupposedtosetAccess-Control-Request-Headerstoinclude
  179. #only"authorrequestheaders"(section7.1.5).Andthenthe
  180. #serverissupposedtouseAccess-Control-Allow-Headersto
  181. #echobackthesubsetofthosewhichisallowed,tellingthe
  182. #browserthatitshouldnotcontinueandperformtheactual
  183. #requestifitincludesadditionalheaders(section7.1.5,
  184. #step8).Sothisimpliesthebrowserclientcodemusttake
  185. #caretoincludeallnecessaryheadersasauthorrequest
  186. #headers.
  187. #
  188. #However,thespecforXmlHttpRequest#setRequestHeader
  189. #(section4.6.2)providesalonglistofheaderswhichthe
  190. #thebrowserclientcodeisforbiddentoset,includingfor
  191. #instanceOrigin,DNT(donottrack),User-Agent,etc..This
  192. #isunderstandable:theseareallheadersthatwewantthe
  193. #browseritselftocontrol,sothatmalicIoUsbrowserclient
  194. #codecannotspoofthemandforinstancepretendtobefroma
  195. #differentorigin,etc..
  196. #
  197. #ButifXmlHttpRequestforbidsthebrowserclientcodefrom
  198. #settingthese(aspertheXmlHttpRequestspec),thenthey
  199. #arenotauthorrequestheaders.Andiftheyarenotauthor
  200. #requestheaders,thenthebrowsershouldnotincludethemin
  201. #thepreflightrequest'sAccess-Control-Request-Headers.And
  202. #iftheyarenotincludedinAccess-Control-Request-Headers,
  203. #thentheyshouldnotbeechoedby
  204. #Access-Control-Allow-Headers.Andiftheyarenotechoedby
  205. #Access-Control-Allow-Headers,thenthebrowsershouldnot
  206. #continueandexecuteactualrequest.Sothisseemstoimply
  207. #thattheCORSandXmlHttpRequestspecsforbidcertain
  208. #widely-usedfieldsinCORSrequests,includingtheOrigin
  209. #field,whichtheyalsorequireforCORSrequests.
  210. #
  211. #Thebottomline:itseemsthereareheadersneededforthe
  212. #webandCORStowork,whichatthemomentyoushould
  213. #hard-codeintoAccess-Control-Allow-Headers,although
  214. #officialspecsimplythisshouldnotbenecessary.
  215. #
  216. add_header'Access-Control-Allow-Headers''Authorization,Content-Type,Accept,Origin,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';
  218. #buildentireresponsetothepreflightrequest
  219. #nobodyinthisresponse
  220. add_header'Content-Length'0;
  221. #(shouldnotbenecessary,butincludedfornon-conformingbrowsers)
  222. add_header'Content-Type''text/plaincharset=UTF-8';
  223. #indicatesuccessfulreturnwithnocontent
  224. return204;
  225. }
  226. #--PUTYOURREGULARNginxCODEHERE--
  227. }

服务器解析流程如下：

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
  1. location/{
  2. add_headerAccess-Control-Allow-Origin*;
  3. }

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

[plain] view plain copy
  1. <IfModulemod_setenvif.c>
  2. <IfModulemod_headers.c>
  3. <FilesMatch"\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
  4. SetEnvIfOrigin":"IS_CORS
  5. HeadersetAccess-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
  1. varimg=newImage,
  2. canvas=document.createElement("canvas"),
  3. ctx=canvas.getContext("2d"),
  4. src="http://example.com/image";//insertimageurlhere
  6. img.crossOrigin="Anonymous";
  8. img.onload=function(){
  9. canvas.width=img.width;
  10. canvas.height=img.height;
  11. ctx.drawImage(img,0);
  12. localStorage.setItem("savedImageData",canvas.toDataURL("image/png"));
  13. }
  14. img.src=src;
  15. //makesuretheloadeventfiresforcachedimagestoo
  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

附图：


参考文章：

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

Nginx CORS实现JS跨域 http://www.jb51.cc/article/p-xhzdhafc-bbp.html

转载请注明出处，文章来自于freshlover的CSDN空间《Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法》

http://www.jb51.cc/article/p-dsqvmmtq-yn.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作