LaravelのAPIがCORSエラーを返す意外な原因

はじめに

Laravel（API）にフロントからAjaxなどでリクエストを送った際にCORSエラーが発生。

前提として

• 一通りCORS対策の設定が適切にできている。
• 正常に通信できていたのに、ある時CORSエラーが返ってきた。

原因１

レスポンスヘッダーが返っていない

コントローラーなどでreturnする時に、以下のようにresponse()を付けていないと、レスポンスヘッダーが送られないので、CORSエラーになります。

return 'Hello world!'; // ×
return response('Hello World!'); // ○

ルーティングのミスやコントローラー内でエラーが発生している場合なども同じくレスポンスヘッダーが返らないのでCORSエラーとなります。

原因２

フロント側からリクエストヘッダーが送られていない

自分の場合はReactでしたが、APIにリクエストする際に送り先のURLの末尾にスラッシュ「/」が付いているとヘッダーが付与されないらしいです。別のフレームワークなどでも同様の仕様があるようです。

この場合もLaravel側はヘッダーがないのでCORSエラーを返します。

原因３

Axiosのバージョンによるもの

詳しくは以下の記事

Axiosアップデートでaxioserror: request failed with status code 419はじめに LaravelをAPIにしてフロントをNext.jsで開発しているサービスで、Axiosを1.6.0へアップデートしたところ、4…

まとめ

今まで、これらの原因でCORSエラーに悩まされてきました。また別の原因に出くわしたら追記して行きます。