記一次跨域和nginx配置問題
阿新 • • 發佈:2019-03-13
請求 The per mozilla 訪問限制 clas ocs -type head
問題描述
- 請求是跨域請求,從a.mycompony.com到b.mycompony.com;後端設置了如下參數,表示前端允許post和get方式跨域請求
response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST,GET"); response.setHeader("Access-Control-Allow-Headers", "Authentication,Content-Type");
- 同樣的跨域請求,get方式的請求能夠正常訪問到上遊服務器,post請求卻不能,報403 forbidden request;
- 還有一個重要信息,這個post請求在以前是可以正常訪問到後端的,並且前段沒有改動過這部分代碼
問題排查
- 請求方式不同,導致差異,說明問題出在後端服務器上遊;
- 前端沒有變動,且以前可以正常訪問,說明問題出在代理服務器nginx上
- 查看nginx配置,發現類似如下代碼
if($request_method != (POST|GET|HEAD)){
return 403;
}
關於跨域
- 跨域可分為簡單請求和非簡單請求
- 簡單請求類似正常請求,只是在請求頭信息和響應頭加以區別;
- 非簡單請求會將請求分為兩次請求,第一次的請求為OPTION方式,用於預檢是否支持第二次的請求方式、域名的訪問請求,比如POST等;例如後端設置:
response.setHeader("Access-Control-Allow-Origin", "a.mycompony1.com");
response.setHeader("Access-Control-Allow-Methods", "POST,GET");
如果前端請求用PUT方式或者跨域域名為b.mycompony.com,後端返回200狀態碼,但是實際是不允許跨域的。錯誤以XHR對象的onError事件表現出來,需要前端用戶手動處理。如果允許訪問,則進行第二次類似簡單請求的請求
OPTIONS /getListCORS HTTP/1.1
Origin: http://b.mycompony.com
Access-Control-Request-Method: PUT
總結:我們的403報錯是因為nginx不支持OPTION請求方式的訪問,刪除訪問限制後可正常進行
參考文檔:
阮一峰的blo
MDN開發者文檔
記一次跨域和nginx配置問題