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

はじめに

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

前提として

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

原因1

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

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

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

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

原因2

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

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

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

原因3

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

詳しくは以下の記事

Axiosアップデートでaxioserror: request failed with status code 419

まとめ

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