Ajax跨域问题解决方案

1、ajax跨域问题解决方案关于跨域，有n种类型，本文只专注于ajax请求跨域cajax跨域只是属于浏览器"同源策略" 中的一sb分，其它的还有cookie跨域iframe local storage跨域等这里不做介绍）,内容大 概如下：什么是ajax跨域o原理o表现（整理了一些遇到的问题以及解决方案）如何解决ajax跨域o jsonp方式o cors方式o代理请求方式如何分析ajax跨域o http抓包的分析o 一些示例什么是ajax跨域cors请求原理cors是一个w3c标准,全称是"跨域资源共享"（cross-origin resource shari

2、ng ）。它允许浏览器向跨源服务器发出xmlhttprequest请求从而克服了 ajax只能同源使用的限制。基本上目前所有的浏览器都实现了 cors标准,其实目前几乎所有的浏览器ajax请求都是基于cors机制的只不过可能平时前端开发人员并不关心而已(所以说其实现在cors解决方案主要 是考虑后台该如何实现的问题)。另外，这里也整理了一个实现原理图(简化版)：聚隽0回应的頁他cors相关字段如下 access-control-allow-methods get, post. put access-control-allow-headers x-custom-headeraccess-cont

3、rol-allow-credentials true zuce$-control-max-age 1728000bf勞構收刑的fl|玖以后wbtongm. access-control-request-methodfqaccess-control- rzue$th“dm字段以后确认允许时谓玖，就可 以越出回也如何判断是否是简单请求?浏览器将cors请求分成两类：简单请求(simple request)和非简单请求(not-so-simple request)。只要同时满足以下两大条件，就属于简单请求。 请求方法是以下三种方法之一 :head,get,post http的头信息不超出以下几种字段

4、：o accepto accept lan guageo con tent-languageo last-eve nt-ido content-type(只限于三个值 applicati on/x-www-form-urle ncoded、 multipart/form-datas text/plain)凡是不同时满足上面两个条件，就属于非简单请求。ajax跨域的表现说实话，当初整理过一篇文章然后作为了一个解决方案，但是后来发现仍然有很多人还是不会。 无奈只能耗时又耗力的调试。然而就算是我来分析,也只会根据对应的表现来判断是否是跨域, 因此这一点是很重要的。ajax请求时，如果存在跨域现象，并

5、且没有进行解决，会有如下表现:(注意，是ajax请求,请不要说 为什么http请求可以，而ajax不行，因为ajax是伴随着跨域的，所以仅仅是http请求ok是 不行的)注意:具体的后端跨域配詈请看题纲位置。第种现象:no 'access-control-allow-origin' header is present on the requested resourc巳并且 the response had http status code 404ildmgbst1/4 requests ob/ 346 kb tr. generalrequest url: http:/192.1

6、68.202.63:8em/epointwzr*mobileservice/rest/phone/getpartybuildingli$trequest method: optionsstatus code:七/ddemote address: 192.168.262.63:8068 response headers view sourcecontent-length: 3date: thu, 18 aug 2016 09:21:16 gmtserver: apache-coyote/1.1accept: request headers view sourceconsolenetwork co

7、nditions("validatedata": "epoint.webserivce.toeefpara*:-currentpageindex": p* jp“esizer "10-,-searchvalue-：/openid*: "123456- options 168.202 6m:8088/et>ointh:rob21escr>vice/rbest/qhocc/getpbrtybuil>dinlisttestauox v：hm：28«ui,s:2932testabxo xhlhttprequest

8、cannot loadtestax vz,htwd:http:/192.168.262.63:8088/epointwzrahobileservice/rest/phone/getpartybuildinglist. response to preflicht request doesnft pass access control check: ho 'accesscontolal】oworigin header is present on the requested resource. origin :8020* is therefore not all

9、owed access. the response had http status code 464.errortestabx v2htiid:46出现这种情况的原因如下:本次ajax请求是"非简单请求"，所以请求前会发送一次预检请求(options)服务器端后台接口没有允许options请农导致无法找到对应接口地址解决方案：后端允许options请求第二种现象:no 'access-control-allow-origin1 header is present on therequested resource,并且 the response had http st

10、atus code 405 userlogintt oken=epcxntb.x headers preview response timing generalrequest url: http:/ytcq coa:m20/$erversignalr/service/mobileservice svc/userlogin?token«epointb idnobilejingjia%40xugiealpdlvhro9r7mv2eziflmok%3ok40mtq2oo14ooq5kg%3d%3d&data>%7b%22loginim22%3 a»22eee

11、7;22%2c*22pas$word%22»3ax22rrtt%22*7d4sign-inlupld5kva08chh7c«rb34brtk»3om method: opymnscode 485 method not flowedremote address: d6:88281 /4 requests 08 / 346kb tr. response headers view sourceallow: getcache-controk privatecontent-type: text/html; ch>rset*u*f8console n

12、etwork conditions v topee%22%2c%22p&sswor 亦 22,3a%22rtt%22%7d&si2nihludla5kvae8cwh7cwbr"b3gtk%3do xmlhttorequest cannot load http:/ytca.coa:8820/serversienalr/service/mobileservice.svc/userlogin? 七”ta让xtoke-e*22x2c%22password%22*3a%22rrtt%22%7d&sign>inlupld5kva08cwh7»rb34brt

13、k*3o response to preflignt request doe$n*t pass access control check: no access-contro】allow-origin* header is present on the requested resource origin *:8820* is therefore not allowed access. the response had http statuserrortesta%x “st.ht1：a0“svdox test.htl：4ij preserve log这种现象和第一种有

14、区别，这种情况下，后台方法允许options请求,但是一些配置文件中（如安 全配置）,阻止了 options请求，才会导致这个现象解决方案：后端关闭对应的安全配置第三种现象:no 'access-control-allow-origin' header is present on therequested resource并且 status 200 useftogin?token=epointb.m generalrequest url: http:/ytcq.co®:882g/serversignalr/$ervice/mobiles«rvice.$vc/

15、userlogin?token«epointb idmobilejingjia%40xugiealpdlvhro9r7mv2ezi1ok«3()mehtq2ooi4ooq5mc%3m3d&oata-%7b«22loginid%22%3 a%22eee»22%2cx22pa$sword%225l3ax22rrtt%22%7msign-inlupld5kvae8cwh7c«rb34brtk»30requz method: optrowsstatus code: 405 method not allowedremote addres

16、s: 00 882g1/4requests 08/346kb tr. response headers view sourceallow: getcache-control: privatecontent-type: text/htol; charset«utf-8g让arrconsole network conditionso v topw uhuunb丄h/、evixe/mqdi丄e、evixe.svt/userlogidoke-ee%22%2c%22password%22%3a%22rrtt%22%7d&si3ihludw5kva38cwh7cfrb

17、348rt>c,3do xmlmttprequest cannot load http:/ytcq.co®:8820/serversignalr/service/ftobileservice.svc/userlogin? testabx test.htel:丄 tokee%22*2c*22password%22%3a%22rrtt%22%7d&sign«inlupld5kvae8chh7card348rtk%30. response to preflight request doe$n*t pass access control check: no '

18、accesscontolal】oworigin* header is present on the requested resource. origin :8020* is therefore not illowed access. the response had http status code“57" j preserve logerror <>testauox testht“l：48这种现象和第一种和第二种有区别，这种ts况下，服务器端后台允许options请求，并且接口也允许options请求，但是头部匹配时出现不匹配现象比如ori

19、gin头部检查不匹配，比如少了一些头部的支持（如常见的x-requested-with头部），然后 服务端就会将response返回给前端，前端检测到这个后就触发xhr.onerror;导致前端控制台报 错解决方案：后端增加对应的头部支持第四种现象:heade contains multiple values '*,* userlogin_v6 generalrequest url 35:soll/epointowebservice/qaheftservice/userloginverequest 袖ethod; onionsstatus code

20、260 okremote address: 61.15s.218.135:8311l/3requ«u ' 0 b / 219 kb tr,.public: options, trace, get, head, post server: microsoft-iis/7.5:console network conditionsx0 v top o preserve logvalidatedata-j-epoint.webserivcewowlparas":test ain&ou login251:19-loginha®e-：hadminw/-passw

21、ord-：h7b21848ac9af35beeoob2d6b9fc3851934db8420-softver$ion-：h1.0- response headers view sourceallow: options, trace, get# head. postcontent-length: 0date: thu, 18 aug 2616 09:54:14 gmt“皿 itest aizou loginh51:37o xmlhttprequest cannot load 3s:8011/epointoawebservice/oahebservice/use

22、rlogin_v6. response to prelifht reouest doesn*t passaccess control check: no *acces$controla】low0header is present on the requested resource. origin :8020* is therefore not allowed access.error<test qindu loginhtn»l:38o xmlhttprequest cannot loaddoc tools a"iax(http:/218.

23、18.9.140:8100/epointoatpframewebservice/oawebservice/u$erlogin_v6. the facces$-control-a header contains multiple values '，but only one is allowed< origin 6:8088 not allowed access.表现现象是/后台响应的http头部信息有两个access-control-allow-origin:*说实话，这种问题岀现的主要原因就是进行跨域配置的人不了解原理,导致了重复配置,如:常

24、见于.net后台（一般在web.config中配置了一次origin撚后代码中又手动添加了一次origin此如代码手动设置了返回*）常见于.net后台（在iis和项目的webconfig中同时设置origin:*）解决方案（一对应）:建议删除代码中手动添加的* ,只用项目配置中的即可建议删除hs下的配置* ,只用项目配置中的即可如何解决ajax跨域一般ajax跨域解决就是通过jsonp解决或者cors解决,如以下:（注意,现在已经几乎不会再使用js0np7 ,所以jsonp 了解下即可）jsonp方式解决跨域问题jsonp解决跨域问题是一个比较古老的方案（实际中不推荐使用），这里做简单介绍（实

25、际项目中如 果要使用jsonp,般会使用jq等对jsonp进行了封装的类库来进行ajax请求）实现原理jsonp之所以能够用来解决跨域方案，主要是因为禅因为 script标签期m域能力 再蔓本上市血属性的标签那背捋域»彷桅址类似fhttpy/examplexom/ipcallbacksfoo*行对应foo函釵foo函数内拿到返回数据視口一»6回数18用foo因数包泰 存然后浏知0km的 script会亶接运行所以会运禅由于json p本身的限制j2种方章只緞用get咖希应对更复获的试求at采用cros方當实现流程jsonp的实现步骤大致如下（参考了来源中的文章）客户端网页网

26、页通过添加一个ad i/1 function addscripttag(src) 2 var script 二 documcnt.crcatcelcmcnt('script,);3 script.setattribute(,rtypeh,htext/javascriptn);4 script.src = src;5 document.body.appendchild(script);6 77 window.onload = function () 8 addscripttag(,9 )1112 function foo(data) 13 console.log(*response da

27、ta:1 + json.stringify(data);14 ；请求时接口地址是作为构建出的脚本标签的src的，这样，当脚本标签构建出来时撮终的src 是接口返回的内容服务端对应的接口在返回参数外面添加函数包裹层3d 11 foo(2 "test": "tcstdata"3 )；由于注意,一般的jsonp接口和普通接口返回数据是有区别的，所以接口如果要做jsono兼容，需要进行判断是否有对应callback关键字参数，如果有则是jsonp请求，返回jsonp数据，否则返回皐数据使用注意基于jsonp的实现原理，所以jsonp只能是"get&qu

28、ot;请求,不能逬行较为复杂的post和其它请 求所以遇到那种情况，就得参考下面的cors解决跨域了（所以如今它也基本被淘汰了）cors解决跨域问题cors的原理上文中已经介绍了，这里主要介绍的是,实际项目中,后端应该如何配置以解决问 题（因为大量项目实践都是由后端逬行解决的）,这里整理了一些常见的后端解决方案：php后台配置php后台得配置几乎是所有后台中最为简单的，遵循如下步骤即可：第一步:配置php后台允许跨域叮1j1 <?php headercccess-control-allow-origin: *);2 header(*access-control-allow-headers

29、: origin, x-requested-with, content-type, accept*);3 主要为跨域cors配置的两大基本信息origin和headers</code?>第二步:配置apache web服务器跨域(httpd.conf中)原始代码javascriptd 11 <directory />2 allowoverride none3 require all denied4 </dircctory>改为以下代码javascript3d 11 <directory />2 options followsymlinks3 al

30、lowoverride none4 order deny,al low5 allow from all6 </directory>node.js后台配置(express框架)node.js的后台也相对来说比较简单就可以进行配置。只需用express如下配置:3d 11 app.all(* function(req, res, next) 2 rcs.hcadcr(haccess-control-allow-origin, h*n);3 res.header(naccess-control-allow-headers, mx-requested-withh);4 res.header

31、(” access-control-allow-me【hods”，”put,post,get,delete,options”)；5 res.header(nx-powered-by, 1 3.2. t)6 这段仅仅为了方便返回json而已7 rcs.hcadcr("contcnt-typc' "application/json;");8 if(req.method = 'options') 9 让options请求快速返回10 res.sendstatus(200);11 | else 12 ncxt();13 )14 )；java后台配置

32、java后台配置只需要遵循如下步骤即可：第一步:获取依赖jar包下载corsfilter-1.7.jar, javapropertyutils1.9.jar这两个库文件放到lib目录下。(放到对应项目的webcontent/web-inf/lib/t)第二步:如果项目用了 maven构建的，请添加如下依赖到pom.xml中:（非maven请忽视）javascriptj1 <dcpcndcncy>2 <groupld>com.thetransactioncompany</groupld>3 <artifactld>cors-filter</a

33、rtifactld>4 <version>| version j</version>5 </dependency>其中版本应该是最新的稳定版本,cors过滤器第三步:添加cors酉己置到项目的web.xml中(app/web-inf/web.xml)javascript3d 11 <!-跨域配置“2 <filter>3 <!- the cors filter with parameters ->4 <filter-name>cors</filter-name>5 <filter-class&g

34、t;com.thetransactioncompany.cors.corsfilter</filler-class>66 <! note: all parameters are options,讦omitted the cors7 filter will fall back to the respective default values.8 ->9 <init-param>10 <param-name>cors.allowgenerichttprequests</para mn ame>11 <param-value>t

35、rue</param-value>12 </init-param>1413 <init-param>14 <param-name>cors.alloworigin</param-name>15 <param-value>*</param-value>16 </init-param>1917 <init-param>18 <param-name>cors.allowsubdomains</param-name>19 <param-value>false&

36、lt;/param-value>20 </init-param>25 <init-param>26 <param-name>cors.supportedmethods</param-name>27 <param-value>get, head, post, options</param-value>28 </init-param>2929 <init-param>30 <parani-name>cors.supporledheaders</param-name>31 &

37、lt;param-value>accept, origin, x-recjuested-with. content-type, last-m（xlified</param-value>32 </init-param>3433 <init-param>34 <param-name>cors.exposedheaders</param-name>35 v!这里可以添加一些自己的暴露headers ->36 <param-value>x-test-1, xtest-2</param-value>37 &l

38、t;/init-param>4038 <init-param>39 <param-name>cors.supporiscredentials</param-name>40 <param-value>true</para m value>41 </init-param>4542 <init-param>43 <para mname>cors.maxagev/param-name>44 <param-value>3600</param-value>45 </in

39、it-param>5046 </filter>5247 <filter-mapping>48 <! cors filter mapping >49 <filtcr-namc>cors</filtcr-nanic>50 <url-pattern>/*</url-pattern>51 </filter-mapping>请注意，以上配置文件请放到web.xml的前面作为第一个filter存在（可以有多个filter的）第四步:可能的安全模块配置错误（注意，某些框架中譬如公司私人框架，有安全模块的,有

40、时候这些安全模块配置会影响跨域配置，这时候可以先尝试关闭它们）net后台配置net后台配置可以参考如下步骤:第一步:网站配置打开控制面板，选择管理工具，选择iis;右键单击自己的网站，选择浏览;打开网立占所在目录，用记 事本打开web.config文件添加下述配置信息，重启网站118119121122123124 3125】26127128129130131132133134135336137138139140141142143 h144145146147】48 i 伽</f ecurl ty> <handlers><r«iove<reaove&l

41、t;reaovecreave<reaove<r«0ve<reaove<re>ovenabe=*febservicehandlerfactory-isapi-4 0_64bit* ruae«*pagehtndlerfact0ry-isapi-4.0w64blt* /> naae«*lebservi cehandl erf ac 10ry-1 safi -2.0-64* /> nae®* patehandl erf ac t ry i safi -2.0-64* /> nac«" febse

42、rvl c eh andlerp tory-1 sap 17 0.32b 11 * naie®* pagehandl erf act ery-1sapi-4.0.32h t* /> naae«*febservicehandlerf«t0ry-isapi-2.0* /> naae«#pacehandlerfactory-isapi-2.0* />/>/><aaa na>e«*vebrettfulinwxner-path»-®/appfervice/»* xype«*

43、feo8uiiaer«oblieservice.reftfullhtndier* /><«sd naae»*»ebservuehandlerfactory-isapi- 0*verb-cbt, eiad. post, mbqc* aodilef>rb«pilodule9 scriptpreftor-lndlrtmucrosoft. iftf><«dd na>e«*pacehandlerfactory-isapl-2.0* path*, aspx* vertr*crrt head, post

44、, debdg* aodules«*isapllodule* scrlptproceffor«*xrlrxllrtilarfoft. iitfraaewo> <«dd noe-*pafehandlerfactory-isapi-4.0.32blt*verb-*ctt# oad, post,mbuc* aodules>*lmpllodulttf criptpr0cetfor«*%vln(lirtiicrofoft. metfi<adtl naie«*febservl cehondl erfac t ory-1 safi 4

45、0.32mf ptthp*<. asax* vcrbgkt budi °ostt mbk* aoduleflsaplldule* icrlpt?rcessor*»wlndlrtiicr0«oft. <add ruaevebservlcehandlerfactory-isapl- 0-64* p<thr*e. verb«*citt dad, post, mboc* aodlales"*ifapilkile* crlptfr0cesfr«*%vlndirxiicrofoft. bf <add ntae>#p&

46、#171;geh«ndlerpact0ry-isapi-2« 0-64* path*. a«pi* verb«*cbt. hi ad. post, dcbtk* aodlilef«*bapilcdule# crlpt?rcwfors*%vlndlrtilcro£t.retfrmi <add naie«*pagehandlerfactory-isapi-4.0.64blt* pathr*®. atpi* verb»*cbtt hfad, post, d8kjc*isapilodule* scrlptp

47、roceiforhvlndlrtmicrofoft. wtf><«dd na«e«*webswvleehandlerfaetry tsapt-4 o.wblt*«»* vermcft, hf ®ost, dfboc* aakilewitapilmkile* tr!ptproce«er«*tvindlrtilcrsoft.</handle»><httpprotocol><custoaheaders><add n«ae«*acccss-

48、cwtrol-allworltln*/><aci(i noe«raccem0ntr0plhov-ne«dcrtv vtlue«vmequekevithf a<add naafccem-cntrol-allov-iethcdt* valuf*cbt, post, put. dam. optiohs* />加上这两行.注意大小写请注意,以上截图较老如果配置仍然岀问题可以考虑增加更多的headers允许上匕如:d 1j1 m access-control-allow-headers11: hx-requested-with,content-typ

49、e, accept,originh第二步:其它更多配置，如果第一步进行了后，仍然有跨域问题,可能是:o 接口中有限制死一些请求类型（比如写死了 post等）,这时候请去除限制o接口中,重复配置了 origin:* ,请去除即可o iis服务器中，重复配置了 origin: * ,请去除即可代理请求方式解决接口跨域问题注意，由于接口代理是有代价的,所以这个仅是开发过程中进行的。与前面的方法不同，前面cors是后端解决，而这个主要是前端对接口进行代理，也就是:前端ajax请求的是本地接口本地接口接收到请求后向实际的接口请求数据，然后再将信息返回给前端 般用node.js即可代理关于如何实现代理，这

50、里就不重点描述了，方法和多,也不难,基本都是基于node.js的。搜索关键字node.js,代理请求即可找到一大票的方案。如何分析ajax跨域上述已经介绍了跨域的原理以及如何解决，但实际过程中，发现仍然有很多人对照着类似的文档 无法解决跨域问题，主要体现在,前端人员不知道什么时候是跨域问题造成的，什么时候不是, 因此这里稍微介绍下如何分析一个请求是否跨域：抓包请求数据第一步当然是得知道我们的ajax请求发送了什么数据,接收了什么,做到这一步并不难,也不 需要fiddler等工具，仅基于chrome即可 chrome浏览器打开对应发生ajax的页面，f12打开dev tools发送ajax请求

51、sffl®ts->network->xhr ,然后找到刚才的ajax请求，点进去示例一（正常的ajax请求）x headers preview resoonse timina请求的目标url generalrequest url: http: /40:8100/epointoatpframewebservice/oale bservice/userlogin_v6request method: post 请求方式status code: 200 ok返回的状态码200ft表成功remote address: 40:8100 请求的目

52、标地址 response headers view sourceaccess-control-allow-headers: x-requested-with, content-type, accept 接口允忤的头部，不能超出范圉access-control-allow-methods: get,post,put,delete,optics 接口允忤的请求类里非筒单请求必矣带optioru access-control-allow-ongin: 接口允忤的请求采涯.代表允忤所有cache-control: private指定请求和响应迺循的缓存机制.private表仅対当85用户有效.不被其他

53、用户共享content-encoding: gzip返回文档的编码方法,gzipjg一个公认的高效压（b方法content length: 224内容长度,当浏总器使岁持久httpfis接时才矣要content-type: text/html; char$et«utf-8 返回内容的mime类型叱 鵲 h 歿tt sftkss消亘发出的时问server: microsoft-iis/8.5 webbes器名字.一般由86务器自己设直vary： accept-encoding告诉代理服务器/塢存/cdn .如何判断请求是若一样值要么聖要么是heade冲的keyg x-aspnet-ve

54、rsion: 4.0.30319 运*x-aspnetmvcversion: 4.0用的版本存组合（服务器判断的依的x-powered-by: asp.net asp.net引華来处理请求和ifi应 request headers view sourceaccept application/json指圭客户请能接收的内.如杲指走“on但返回不是.会板指 accept-encoding: gzip, deflate客户总器）支持的压缩类昱如gzips,超出类型不说接收accept-language: zh-cn,zh;q«0.8浏总器支持的语言类璽.如zhcn,zh;q=08 .并且优

55、先支持靠雨的语言类型connection: keepalive当浏贤器与86努器通信时对于长连接如何逬行处理如keepvliveft表保持连接 content'length: 177content-type: text/html; charset«utf-8 发出去的内容的mime类型host: 40:8100庙走请求嚴务器的域名以及第口号origin： 5:8020星初的请求星从境里发起的（h用于post请求）origin比referei更尊重険私referee http:/192 168.114.3520/%e8w

56、%87%e6%81%82%e7%m%8a4%be%8b/testajax_test.html该页面的来2surlfis用于所有类型的请求）user-agent: mozilla/5.0 (windows nt 61; w0w64) applewebkit/537.36如ua头鋼(khthl9 like gcko) chro<ne/5002657.3 safari/537.36 用户囂户厘的 f 必養 x-requested with: xmlhttprequest自走义头部这个头部是自黑义鬲入譎友送给接口的数捋.这里直接转 成字符丰放在body里面了 . 一般不同接口要求的格式不一 fo

57、rm data view source view url encodedwvalidatedataw:"epointoaaspudzfkrr3a747-hftgywavlco: f-1tq3mjc3nzi 5ng««-,-paras":(wloginidm:kadmin-password":"3d4f2bf07dc1be38b20cd 6e46949a1071f9d0e3dw/wsoftversion-：-6.0.0m上述请求是一个正确的请求，为了方便，我把每一个头域的意思都表明了，我们可以清晰的看到, 接口返回的响应头域中,包括了d

58、 11 access-control-allow-headers: xrequested-with,content-type,accept2 access-control-allow-methods: get.postput.options3 acccss-control-allow-origin: *所以浏览器接收到响应时,判断的是正确的请求，自然不会报错,成功的拿到了响应数据。示例二（跨域错误的ajax请求）name为了方便，我们仍然拿上面的错误表现示例举例。x headers preview response timing generalrequest url: http:/61.155.218135:8011/epointqawebservice/oawebservice/userlogin.v6 request method: optionsstatu, code: 260 okremote address