Next.js : middleware.ts で CORS 設定を行う方法

Next.js : middleware.ts で CORS 設定を行う方法

CORS 設定を適切に行うことで、異なるオリジン間でリソースを共有し、安全な通信を実現できます。以下では、具体的な CORS 設定方法について説明します。

参考リンク: Next.js Documentation - Middleware and CORS

CORS 設定例: next.config.mjs を使った方法

Next.js のプロジェクトでは、next.config.mjs ファイルを使用して CORS ヘッダーを設定することが可能です。以下は、特定のオリジンに対して CORS を許可する設定例です。

この設定により、指定したオリジンからのリクエストに対して、適切に CORS ヘッダーを設定することができます。また、必要に応じて Access-Control-Allow-Methods で許可する HTTP メソッドを制限したり、Access-Control-Allow-Headers で許可するカスタムヘッダーを指定できます。

API ルートに直接 CORS 設定を書く場合

Next.js の API ルートで CORS 設定を行う場合、標準的な Web API メソッドを使用してレスポンスに CORS ヘッダーを設定することができます。以下はその例です。

この方法を使うことで、API ハンドラー内で直接 CORS の設定をカスタマイズすることができます。この例では、Access-Control-Allow-Origin ヘッダーに * を設定することで、すべてのオリジンからのアクセスを許可しています。ただし、セキュリティ上の理由から、公開しても良いリソースにのみ使用することをお勧めします。

ミドルウェアでの CORS 設定

Next.js の middleware.ts を使うことで、サイト全体のリクエストに対する CORS の設定を集中管理することが可能です。たとえば、以下のように middleware.ts を使用して、特定のリクエストパスに対して CORS を設定することができます。

このミドルウェアでは、リクエストの Origin ヘッダーを確認し、許可されたオリジンからのリクエストに対してのみ Access-Control-Allow-Origin ヘッダーを設定しています。また、すべての API ルートに対して CORS 設定を適用するようにマッチャーを設定しています。

CORS 設定における注意点

CORS 設定を行う際には、以下の点に注意してください。

• セキュリティリスク: Access-Control-Allow-Origin に * を設定すると、すべてのオリジンからのリクエストを許可することになり、セキュリティリスクが高まります。重要なデータを扱う API には、この設定は避けるべきです。
• プリフライトリクエスト: OPTIONS メソッドを使用するプリフライトリクエストに対応する必要がある場合があります。これは特に、非シンプルなリクエスト（たとえば、カスタムヘッダーを含むリクエスト）を行う場合に重要です。
• 動的と静的の設定: Next.js では dynamic や force-static などの設定を用いて、ページのレンダリング方式を制御することができます。CORS 設定がこれに影響を与えることがあるため、設定を適切に使い分けることが必要です。

参考資料

• Supabase Docs - CORS (Cross-Origin Resource Sharing) サポート
• Next.js 公式ドキュメント - Route Handlers