本記事の目的
本記事では、CORSについてザックリ理解することを目的としています。
CORSの必要性がわからない、初めてCORSという単語を見たという方は、本記事で理解を深めていただければ幸いです。
サンプルコードには、React、Expressなどを使用していますが、これらの技術を知らなくてもCORSの理解ができるように説明しています。
CORSとは
まず、簡潔にCORSを説明すると異なるオリジン間でデータを共有する仕組みのことです。
では、オリジンとは何でしょうか?
オリジンとは
オリジンとは、実行したアプリのベースとなるURLです。
例えば、プラットフォームによって以下のような初期オリジンが設定されます。
(※プラットフォームとは、アプリを実行する環境のことです)
| プラットフォーム | オリジン |
|---|---|
| ローカル環境 | http://localhost.3000 |
| Vercel | https://myapp.vercel.app |
| Render | https://myapp.onrender.com |
| AWS Amplify | https://branch.myapp.amplifyapp.com |
CORSの必要性
ブラウザは、このような異なるオリジン間でのデータの送受信を制限します。
この制限を安全に緩和するためにCORSを使用します。
実践
CORSの設定がどのように記述されるのか確認します。
確認には、クライアント/サーバ構成のアプリを用います。
ブラウザ画面のボタンを押下し、正常にサーバからのレスポンスを取得できたらブラウザ画面に「Success」と文字が表示されます。
ソースコード内のREDMEに環境構築方法を記載しています。
ソースコード: https://github.com/YutoOtake0015/cors-check
構成
クライアント処理はclientディレクトリ、サーバ処理はapiディレクトリで管理します。
クライアント処理、サーバ処理は、別々に起動するため異なるオリジンを持ちます。
(※本記事内では、クライアント処理：http://localhost.3000、サーバ処理：http://localhost.5050)
.
├── api
│ ├── package-lock.json
│ ├── package.json
│ └── server.js
└── client
├── package-lock.json
├── package.json
├── public
│ └── index.html
└── src
├── App.jsx
└── index.js
CORS未設定の処理を確認
CORSを未設定の場合の動作を確認します。
値の取得に失敗し、エラーが表示されました。
この時のデベロッパーツールのコンソールパネルを確認してみましょう。
エラーが出力されており、CORSという文言を確認できます。
では、CORSの設定をして、サーバの値を取得できるようにします。
CORSを設定
import dotenv from "dotenv";
import express from "express";
import cors from "cors";
const app = express();
const PORT = process.env.PORT || 5050;
// 環境変数有効化
dotenv.config();
// CORS設定
const corsOptions = {
origin: "http://localhost:3000",
};
// CORS設定を有効にする場合、以下1行のコメントアウトを解除してください
app.use(cors(corsOptions));
// 確認用エンドポイント
app.get("/check", (req, res) => {
return res.send("Success");
});
// サーバ起動
app.listen(PORT, () => {
console.log(`http://localhost:${PORT}`);
});
app.use(cors(corsOptions));によって異なるオリジンからのリクエストを受け付けています。
また、corsOptionsで受け付けるオリジンを明確に指定しています。
今回は、クライアントのオリジンhttp://localhost:3000を指定しています。
(※実際のコーディングでは、オリジンなどの情報は環境変数に設定しましょう)
では、この時の動作を確認してみましょう。
無事、サーバから値を取得できました！