GET 請求從瀏覽器和郵遞員工作，但在 React App 中從本地主機失敗，端點是否必須添加訪問控制允許來源？

Question

我正在從事一個項目，在該項目中我獲得了一個端點來獲取一些數據。 我將該端點的 url 放在瀏覽器中，並且按預期看到了 JSON。 我在 Postman 中提出了同樣的請求，我得到了預期的結果。 然后，在 React 應用程序中使用來自localhost fetch或axios發出請求，當我在瀏覽器中運行該應用程序時，我得到：

從源“ http://localhost:3000 ”獲取“ https://providedurl/path ”的訪問已被 CORS 策略阻止：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 如果不透明響應滿足您的需求，請將請求的模式設置為“no-cors”以在禁用 CORS 的情況下獲取資源。

我只是想確保我對此無能為力？ 是修改端點以添加Access-Control-Allow-Origin標頭的唯一解決方案，還是可以從請求端完成某些操作？

Answer 1

CORS（跨域資源共享）是服務器說“我會接受你的請求，即使你來自不同的來源”的一種方式。 這需要服務器的合作——因此如果您無法修改服務器（例如，如果您使用外部 API），則此方法將不起作用。

修改服務器以添加頭 Access-Control-Allow-Origin: * 以啟用來自任何地方的跨域請求（或指定域而不是 *）。 這應該可以解決您的問題。

但是您可以在 Postman 和瀏覽器中訪問它，如果您可以在瀏覽器級別禁用 CORS，它將起作用。

在 Chrome 中禁用 CORS：

1. 為chrome瀏覽器創建一個新的快捷方式並重命名為“anyname(disablecors)”

2. 右鍵單擊新創建的快捷方式並選擇屬性

3. 在您的系統中創建一個任何名稱的文件夾（tempchrome）。

4. 選擇快捷選項卡並將目標添加為 ""[PATH_TO_CHROME]\\chrome.exe" --disable-web-security --disable-gpu --user-data-dir="tempchrome 的路徑""

5. 單擊應用並保存。

6. 在新創建的 chrome 快捷方式（disablecors）中打開您的應用程序

Answer 2

如果前端在端口 3000 上運行而后端在 5000 上運行，另一個快速解決方法是應用代理。 它是這樣的。 將以下依賴項放入您的客戶端包中：

  "proxy": "http://localhost:5000",

然后使請求相對，而不是絕對。 應該使用此設置。