CORS

Next.jsからリクエストを送信すると下記のエラーが発生した。

Access to XMLHttpRequest at 'http://<APIのホスト>/api/login' from origin 'http://<フロント画面のホスト>:3002' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

このエラーは、CORS（Cross-Origin Resource Sharing）ポリシーによって発生しています。ブラウザは、異なるオリジン間でのリソース共有を制限するためにCORSポリシーを実施しています。このエラーを解決するには、Laravel API側で適切なCORS設定を行う必要があります。

CORSの設定はconfig/cors.phpファイルで行います。このファイルに次のような設定を追加してください。

return [
    // ...
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_origins' => ['http://<フロント画面のホスト>:3002'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'allowed_methods' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

ここで、allowed_originsに、Next.jsアプリケーションのオリジン（http://<フロント画面のホスト>:3002）を設定しています。また、supports_credentialsをtrueに設定して、クレデンシャルを含むリクエストを許可しています。

この設定を行った後、Laravel APIを再起動して、エラーが解消されるか確認してください。もし解決しない場合は、キャッシュをクリアして再試行してみてください。

php artisan config:clear

LaravelやNext.jsは、デフォルトでCORSに関する一定の設定がありますが、プロジェクトの要件に応じて開発者がCORS設定を調整することが想定されています。

Laravelの場合、CORSの設定は config/cors.php ファイルで管理されており、デフォルトで特定の設定が行われています。しかし、実際の開発においては、この設定をプロジェクトの要件に合わせて調整することが一般的です。例えば、APIを利用するクライアントのオリジンを制限する、特定のHTTPメソッドやカスタムヘッダーを許可するなどの設定が可能です。

Next.jsの場合、CORSに関する設定はデフォルトでは提供されていませんが、APIルートを使用する際にCORS対応が必要になります。Next.jsでCORS対応を行うためには、APIルート内でCORSミドルウェア（例：next-cors ライブラリ）を使用して、CORS設定を行うことが一般的です。

結論として、LaravelやNext.jsはデフォルトでCORSに関する一定の設定がありますが、実際の開発では、開発者がCORS設定をプロジェクトの要件に応じて調整することが想定されています。