2019/09

Ajax跨域問(wèn)題全面了解

發(fā)布時(shí)間：2019-09-07 17:53:58

發(fā)布者：就是帥

瀏覽量:

從剛接觸對(duì)接接口起，跨域這個(gè)問(wèn)題就一直發(fā)生在我的身上，當(dāng)然同事的身上也時(shí)常發(fā)生，一直到現(xiàn)在，已經(jīng)解決過(guò)測(cè)試過(guò)超級(jí)多個(gè)跨域相關(guān)的問(wèn)題了，現(xiàn)在就來(lái)總結(jié)一下，其中的原因和解決方法。

ajax跨域的表現(xiàn)

ajax請(qǐng)求時(shí),如果存在跨域現(xiàn)象,并且沒(méi)有進(jìn)行解決,會(huì)出現(xiàn)下面幾種錯(cuò)誤現(xiàn)象:

第一種現(xiàn)象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 404

跨域表現(xiàn).png

出現(xiàn)這種情況的原因如下：

本次ajax請(qǐng)求是“非簡(jiǎn)單請(qǐng)求”,所以請(qǐng)求前會(huì)發(fā)送一次預(yù)檢請(qǐng)求(OPTIONS)
服務(wù)器端后臺(tái)接口沒(méi)有允許OPTIONS請(qǐng)求,導(dǎo)致無(wú)法找到對(duì)應(yīng)接口地址

解決方案: 后端允許options請(qǐng)求

第二種現(xiàn)象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 405

跨域表現(xiàn)2.png

這種現(xiàn)象和第一種有區(qū)別,這種情況下，后臺(tái)方法允許OPTIONS請(qǐng)求,但是一些配置文件中(如安全配置),阻止了OPTIONS請(qǐng)求,才會(huì)導(dǎo)致這個(gè)現(xiàn)象

解決方案: 后端關(guān)閉對(duì)應(yīng)的安全配置

第三種現(xiàn)象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且status 200

跨域表現(xiàn)1.png

這種現(xiàn)象和第一種和第二種有區(qū)別,這種情況下，服務(wù)器端后臺(tái)允許OPTIONS請(qǐng)求,并且接口也允許OPTIONS請(qǐng)求,但是頭部匹配時(shí)出現(xiàn)不匹配現(xiàn)象

比如origin頭部檢查不匹配,比如少了一些頭部的支持(如常見(jiàn)的X-Requested-With頭部),然后服務(wù)端就會(huì)將response返回給前端,前端檢測(cè)到這個(gè)后就觸發(fā)XHR.onerror,導(dǎo)致前端控制臺(tái)報(bào)錯(cuò)

解決方案: 后端增加對(duì)應(yīng)的頭部支持

第四種現(xiàn)象:heade contains multiple values ','

跨域表現(xiàn)3.jpg

表現(xiàn)現(xiàn)象是，后臺(tái)響應(yīng)的http頭部信息有兩個(gè)Access-Control-Allow-Origin:*

說(shuō)實(shí)話，這種問(wèn)題出現(xiàn)的主要原因就是進(jìn)行跨域配置的人不了解原理，導(dǎo)致了重復(fù)配置，如:

常見(jiàn)于.net后臺(tái)(一般在web.config中配置了一次origin,然后代碼中又手動(dòng)添加了一次origin(比如代碼手動(dòng)設(shè)置了返回*))
常見(jiàn)于.net后臺(tái)(在IIS和項(xiàng)目的webconfig中同時(shí)設(shè)置Origin:*)

解決方案(一一對(duì)應(yīng)):