[CORS] POST 方法 Postman 可以過，但是 Axios 無法

發表於 更新於 閱讀次數：

問題說明

POST 方法在瀏覽器中會觸發預檢請求（preflight），瀏覽器實際上會送出兩個請求，第一個是 OPTIONS、第二個是 POST，當後端伺服器對 preflight 的回應沒有設置好時就會觸發瀏覽器的 cors 阻擋。

Postman 發送 POST 請求時不會有 preflight，要檢測 preflight 可以另外發送 OPTIONS 請求。

可能原因

  1. 後端沒有設置 cors header

    1
    'Access-Control-Allow-Origin': '*',

  2. 後端沒有設置 OPTIONS methods 或 response

    1
    2
    3
    'Access-Control-Allow-Methods': '...(其他方法).., OPTIONS',

    // 除 header 之外還要設置 OPTIONS 的回傳內容，不然可能被 40x 錯誤捕捉到。

檢查測試

  1. 確認瀏覽器錯誤訊息是否包含 preflight 的字眼。
    Access ..... has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

  2. 使用 Postman 發出 OPTIONS 請求，查看回應資訊。

解決方式

  • 正解：請後端加上 cors headers 或是確認 OPTIONS 的設置。
  • 暫時解：使用 CorsAnywhere、關閉瀏覽器 cors…等。

參考文章