背景：

1、前端Web中有兩個域名，a.com和b.com，其中a.com是訪問主站（頁面），b.com是數(shù)據(jù)提交接口的服務(wù)器（XHR請求）

2、a.com中用XHR調(diào)用b.com/cerate【沒有指定協(xié)議】，保存數(shù)據(jù)，寫法如下：

$.ajax({url: "//b.com/create",type: 'POST',data: requestParams,dataType: 'json',xhrFields: {withCredentials: true},crossDomain: true,async: false,success: function (data) {// ...},error: function (ret) {// ... });

　　

3、線上環(huán)境中，a.com和b.com的都在Nginx中配置了302強制跳轉(zhuǎn)https

4、某個測試環(huán)境中，a.com沒有跳轉(zhuǎn)https，b.com有

?

問題：

1、線上環(huán)境，用戶訪問的是https://a.com，調(diào)用接口為https://b.com/create，跨域沒有問題。

2、但是在測試環(huán)境中，測試人員直接打開了http://a.com頁面，調(diào)用接口就變成為http://b.com/create，這里跨域預(yù)檢時，b.com的Nginx反饋302跳轉(zhuǎn)，報錯。

{"readyState":0,"status":0,"statusText":"NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://b.com/create."}

?

分析：

1、readtState: 0說明請求沒有發(fā)出去，被瀏覽器攔截了，可能情況有：

• url格式不對
• 跨域失敗
• 參數(shù)錯誤
• 用戶取消
• 其它...

2、這里應(yīng)該是跨域失敗的問題，因為報錯是faild to load url

3、之前沒有關(guān)注過跨域重定向問題，StackOverFlow之：

https://stackoverflow.com/questions/18539403/chrome-cancels-cors-xhr-upon-http-302-redirect/38810391#38810391

4、W3C標(biāo)準(zhǔn)?https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0

5、總的來說，就是對于非簡單請求（XHR等），當(dāng)跨域預(yù)檢（Option請求）時，如果出現(xiàn)非20X等時，會直接失敗，拋出readtState: 0

?

解決方法：

1、在Ajax中明確https協(xié)議，避免b.com預(yù)檢時返回302

$.ajax({url: "https://b.com/create",type: 'POST',data: requestParams,dataType: 'json',xhrFields: {withCredentials: true},crossDomain: true,async: false,success: function (data) {// ...},error: function (ret) {// ... });

　　

2、修改測試環(huán)境a.com下的服務(wù)器，保持和線上環(huán)境一致，不讓用戶走到http://a.com，強制走h(yuǎn)ttps://a.com訪問頁面

?

總結(jié)：

之前一直覺得：

請求中不指定協(xié)議，使用//自動適配頁面url的協(xié)議

是一個標(biāo)準(zhǔn)規(guī)范。現(xiàn)在看來，對于簡單請求，比如頁面跳轉(zhuǎn)、圖片加載等確實是一個好的做法，但是對于后端接口請求這類，可能需要具體場景斟酌。這句話可以改為：

簡單請求中不指定協(xié)議，使用//自動適配頁面url的協(xié)議

轉(zhuǎn)載于:https://www.cnblogs.com/smileSmith/p/9277060.html

總結(jié)

以上是生活随笔為你收集整理的【笔记】跨域重定向中使用Ajax（XHR请求）导致跨域失败的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。