【筆記】跨域重定向中使用Ajax（XHR請求）導致跨域失敗
背景：
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的協議
【筆記】跨域重定向中使用Ajax（XHR請求）導致跨域失敗