CORS in React zulassen

Wir werden CORS vorstellen und wie man es in React zulässt.

CORS in React

Entwickler haben mit CORS zu kämpfen, weil es ein kniffliges Konzept ist, wie für neue Entwickler, die kürzlich begonnen haben, mit APIs von Drittanbietern von Single-Page-Anwendungen auf React zu arbeiten.

CORS steht für Cross-Origin Resource Sharing; Es ist ein Protokoll wie HTTPS, das Regeln für die gemeinsame Nutzung von Ressourcen unterschiedlicher Herkunft definiert. Es ermöglicht uns den Zugriff auf eine Ressource von einem anderen Ursprung und überschreibt das Standardverhalten unseres Browsers aufgrund von SOP.

Wenn ein Client eine Ressource anfordert, enthält die Antwort einen Stempel, der unseren Browser anweist, die gemeinsame Nutzung von Ressourcen über verschiedene Ursprünge hinweg zuzulassen.

Sobald unser Browser diesen Stempel erkennt, dürfen die Antworten auf Anfragen, die von unterschiedlichen Ursprüngen stammen, passieren.

Lassen Sie uns ein Beispiel mit einer API namens https://jsonplaceholder.typicode.com haben.

Wir können CORS aktivieren, indem wir einen API-Proxy in package.json hinzufügen. Wir gehen zu package.json und fügen "proxy": "https://jsonplaceholder.typicode.com" hinzu.

Die package.json sieht dann so aus.

# 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 ist aktiviert und die API funktioniert ohne Fehler.