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

ajax跨域的表現(xiàn)

ajax請求時,如果存在跨域現(xiàn)象,并且沒有進(jìn)行解決,會出現(xiàn)下面幾種錯誤現(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)這種情況的原因如下：

• 本次ajax請求是“非簡單請求”,所以請求前會發(fā)送一次預(yù)檢請求(OPTIONS)

• 服務(wù)器端后臺接口沒有允許OPTIONS請求,導(dǎo)致無法找到對應(yīng)接口地址

解決方案: 后端允許options請求

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

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

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

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

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

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

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

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

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

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

• 常見于.net后臺(一般在web.config中配置了一次origin,然后代碼中又手動添加了一次origin(比如代碼手動設(shè)置了返回*))

• 常見于.net后臺(在IIS和項(xiàng)目的webconfig中同時設(shè)置Origin:*)

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

• 建議刪除代碼中手動添加的*，只用項(xiàng)目配置中的即可

• 建議刪除IIS下的配置*，只用項(xiàng)目配置中的即可