使用提取API的CORS錯誤-React Create應用

Question

我正在使用訪存使用API​​，但是卻收到CORS錯誤。 我嘗試了多個標頭，但我沒有理解這是什么問題。

我不是該API的所有者，因此無法更改它，但是檢查響應是否返回access-control-allow-origin 。

以下是我的請求方法：

export const execPOST = (url, body) => {
  return fetch(url, {
    method: "POST",
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(body)
  });
};

響應為：

Request URL: http://api
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: ip
Referrer Policy: no-referrer-when-downgrade
Response Headers:
Access-Control-Allow-Origin: *

上面的回復不足以允許我的請求嗎？

控制台錯誤：

選項http://api net :: ERR_ABORTED 405（不允許使用方法）CORS策略已阻止從來源'http://localhost:3000'訪問'http://api'處'http://api'訪問：對預檢請求的響應沒有無法通過訪問控制檢查：它沒有HTTP正常狀態。

我使用"https://cors-anywhere.herokuapp.com/"了此工作（同時進行開發），但是我認為我不應該將其用於生產環境。

我發現了很多有關此問題的材料，但是除了實現后端來發出請求或使用其他內容作為代理來進行請求之外，其他任何有效的方法……

Answer 1

API設置了CORS標頭，以保護用戶免受代表他們向網站提出請求的惡意代碼的侵害。

這意味着您不能從客戶端啟用或禁用它，因為Access-Control-Allow-Origin標頭是僅服務器端的標頭。

如果您無權訪問API來更改標頭，那么您將無法從客戶端使用該API。

在生產中，您必須創建自己的API，該API可以處理對您嘗試聯系的API的請求。

Answer 2

更新代碼如下（使用'mode'值為'no-cors'）：

有關更多詳細信息，請單擊鏈接=> https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

export const execPOST = (url, body) => {
    return fetch(url, {
    mode:'no-cors'
    method: "POST",
    headers: {
      "Content-Type": "application/json"
   },
    body: JSON.stringify(body)
  });
};