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

ajax跨域的表現

ajax請求時,如果存在跨域現象,并且沒有進行解決,會出現下面幾種錯誤現象:

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

出現這種情況的原因如下：

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

• 服務器端后臺接口沒有允許OPTIONS請求,導致無法找到對應接口地址

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

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

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

解決方案: 后端關閉對應的安全配置

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

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

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

解決方案: 后端增加對應的頭部支持

第四種現象:heade contains multiple values '*,*'

表現現象是，后臺響應的http頭部信息有兩個Access-Control-Allow-Origin:*

說實話，這種問題出現的主要原因就是進行跨域配置的人不了解原理，導致了重復配置，如:

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

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

解決方案(一一對應):

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

• 建議刪除IIS下的配置*，只用項目配置中的即可