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