【SPA開発あるある】CORSでつまづく
はじめに
私の所属するプロダクトではフロントエンドとバックエンドはRailsで書かれているのでRailsをバックエンドにし、フロントをReactで書こうとした時にCORSで詰まった記憶があります。
その後も何度かSPA開発する時にCORS対策を忘れて、エラー吐いては検索して、CORSであることに気づきます。
今までRails,Honoをバックエンドにした時に同じ手順を踏んだので、CORSとは？とHonoに特定した実装方法について書きたいと思います
CORSとは
CORS (Cross-Origin Resource Sharing) は、日本語ではオリジン間リソース共有と言われていて、ウェブブラウザが異なるオリジン間で許可されたリソースを共有するためものです。
オリジンとはhttps://www.hogehoge.comのようなものを指します
◼︎補足
- 以下の内容が一致している場合
- URLのプロトコル (httpやhttps)
- ホスト名 (例: localhostやexample.com)
- ポート番号 (例: 3000や4000)
例えば、フロントエンド（https://localhost:4000）とバックエンド（https://localhost:3000）のようにドメイン名が異なると、ブラウザの同一オリジンポリシーによってアクセスが制限されるため、CORSを使用する必要があります。
もう少し詳細に書くと、バックエンドがリクエストヘッダーに含まれるOriginを確認し、そのオリジンからのリクエストを許可するかどうかを判断します。この際、許可されている場合にはレスポンスに適切なCORSヘッダー（例:Access-Control-Allow-Origin）を含めることで、ブラウザ側がリクエストを正常に処理できるようにします。
つまりバックエンド側でオリジンの許可について設定する必要があります。
CORS対策
- 上までが本題です。ここからは補足です。
Honoではどう実装するのか
-
今回はHonoをバックエンドにしているので、HonoでCORS対策をしていきます
-
あとわかりやすくてドキュメントをパクればいいのでもう実装できたようなもの
-
多分ミドルウェアをインストールする必要がある
npm install @hono/cors
- 許可するオリジンの設定をしてみる
import { Hono } from 'hono';
import { cors } from '@hono/cors';
const app = new Hono();
// CORSの設定
app.use('*', cors({
origin: 'http://localhost:4000', // 許可するオリジン
allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 許可するHTTPメソッド
allowHeaders: ['Content-Type', 'Authorization'], // 許可するヘッダー
}));
app.get('/', (c) => c.text('Hello, CORS!'));
app.listen(3000);
- 全部のオリジンを許可したい場合には、
origin: '*'とすればいいはずです
Discussion