背景：

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

2、a.com中用XHR調用b.com/cerate【沒有指定協議】，保存數據，寫法如下：

$.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、線上環境中，a.com和b.com的都在Nginx中配置了302強制跳轉https

4、某個測試環境中，a.com沒有跳轉https，b.com有

?

問題：

1、線上環境，用戶訪問的是https://a.com，調用接口為https://b.com/create，跨域沒有問題。

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

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

?

分析：

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

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

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

3、之前沒有關注過跨域重定向問題，StackOverFlow之：

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

4、W3C標準?https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0

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

?

解決方法：

1、在Ajax中明確https協議，避免b.com預檢時返回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、修改測試環境a.com下的服務器，保持和線上環境一致，不讓用戶走到http://a.com，強制走https://a.com訪問頁面

?

總結：

之前一直覺得：

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

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

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

轉載于:https://www.cnblogs.com/smileSmith/p/9277060.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。