在 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.