React で CORS を許可する

Rana Hasnain Khan 2022年4月18日

React React CORS

CORS とそれを React で許可する方法を紹介します。

React の CORS

最近 React のシングルページアプリケーションからサードパーティの API を使い始めた新しい開発者のように、CORS はトリッキーな概念であるため、開発者は CORS に苦労しています。

CORS は、クロスオリジンリソースシェアリングの略です。これは、異なるオリジンからのリソースを共有するルールを定義する HTTPS のようなプロトコルです。これにより、別のオリジンからリソースにアクセスできるようになり、SOP によるブラウザのデフォルトの動作が上書きされます。

クライアントがリソースを要求すると、応答には、さまざまなオリジン間でのリソース共有を許可するようにブラウザに指示するスタンプが含まれます。

ブラウザがこのスタンプを識別すると、さまざまな発信元からのリクエストに対する応答が通過できるようになります。

https://jsonplaceholder.typicode.com という名前の 1つの 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 はエラーなしで正常に動作します。

著者： 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.