記一次跨域和nginx配置問題

問題描述

1. 請求是跨域請求，從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");

1. 一樣的跨域請求，get方式的請求可以正常訪問到上游服務器，post請求卻不能，報403 forbidden request；
2. 還有一個重要信息，這個post請求在之前是能夠正常訪問到後端的，而且前段沒有改動過這部分代碼

問題排查

1. 請求方式不一樣，致使差別，說明問題出在後端服務器上游；
2. 前端沒有變更，且之前能夠正常訪問，說明問題出在代理服務器nginx上
3. 查看nginx配置，發現相似以下代碼

if($request_method != (POST|GET|HEAD)){
    return 403;
}

關於跨域

1. 跨域可分爲簡單請求和非簡單請求
2. 簡單請求相似正常請求，只是在請求頭信息和響應頭加以區別；
3. 非簡單請求會將請求分爲兩次請求，第一次的請求爲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開發者文檔