在 React 中允許 CORS

Rana Hasnain Khan 2022年5月18日

React React CORS

我們將介紹 CORS 以及如何在 React 中允許它。

React 中的 CORS

開發人員一直在努力使用 CORS，因為它是一個棘手的概念，例如對於最近開始在 React 上的單頁應用程式中使用第三方 API 的新開發人員。

CORS 代表跨域資源共享；它是一種類似於 HTTPS 的協議，它定義了從不同來源共享資源的規則。它使我們能夠訪問來自不同來源的資源，並覆蓋我們的瀏覽器由於 SOP 的預設行為。

當客戶端請求資源時，響應包含一個標記，告訴我們的瀏覽器允許跨不同來源共享資源。

一旦我們的瀏覽器識別出這個標記，來自不同來源的請求的響應就會被允許通過。

讓我們舉一個例子，使用一個名為 https://jsonplaceholder.typicode.com 的 API。

我們可以通過在 package.json 中新增 API 代理來啟用 CORS。我們將轉到 package.json 並新增 "proxy": "https://jsonplaceholder.typicode.com"。

package.json 看起來像這樣。

# react
{
  "name": "react",
  "version": "1.0.0",
  "description": "React example starter project",
  "keywords": ["react", "starter"],
  "proxy": "https://jsonplaceholder.typicode.com",
  "main": "src/index.js",
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0"
  },
  "devDependencies": {
    "@babel/runtime": "7.13.8",
    "typescript": "4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
}

React CORS 已啟用，API 工作正常且沒有錯誤。

Author: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.