2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Laravel+Nuxt.jsでCORSエラー

Last updated at Posted at 2022-03-02

またCORSエラーに何時間も悩まされました。

Laravel8でconfig/cors.php を最大限に緩めた設定にしても、毎度おなじみのエラーが出て困り果てていました。

結局、原因はCORSそのものの設定ではなく、その手前の処理でいくつかミスっていたため、レスポンスが正しく返されていないせいでした。

今回のミス。

Basic認証対策漏れ

Basic認証がかかっている試験環境サーバへのデプロイだったが、レスポンスが正しく返せていなかった。この場合でもブラウザにはCORSエラーが表示される。

APIリクエストのパスにBasic認証のIDとパスワードを付与していなかったためと思ったが、URLを

https://basicid:basicpath@sample.com/api/test

みたいにして埋め込んでもダメでした。

そのため、APIサーバになるLaravel側のドメイン部分はApacheの設定を上書きしてBasic認証から除外しました。
とりあえず全部許可しましたが、今後管理画面とかをこのドメインに配置する場合はURLパターンで制限かけ直す必要はあります。

public/.htaccess
# 以下を追記
Satisfy Any
Order allow,deny
Allow from all
Deny from none

モデルのSeedが正しくできていなかった。

ログインページでCORSエラー発生。
API連携でLaravel側で認証していたが、単純にUserの初期データを投入できていなかった。
DatabaseSeederに必要なSeederクラスを登録していないのに、
php artisan db:seed を実行してやった気になっていた。
php artisan db:seed --class=UserTableSeeder でやりなおしたら治った。

Allow-Origin-Headerを2箇所に書いていた

ググっていろいろ試しているうちに余計なことをしていた。
laravel内のcors.phpで記述しているのに、同じことをpublic/.htaccessにも書いていた。
2箇所に allow-origin-header = "*" を書くと、重複エラーが起きる。

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?