初めましての方は初めまして。けこです。
この度ちょっとしたAPIサーバを立てる運びになりまして、その際にAccess-Control-Allow-Originの設定を"*"にすることはできません。という内容のエラーに苦しめられましたので、知見を共有させていただきます。(注意:Laravel初学者です)
構成等
フロントエンドVue.js、バックエンドLaravel+MySQLという構成です。
フロントエンドはexample.jp、バックエンドはxxx.example.jpというドメインを取っていました。よくあるSPAってやつです。
今回苦戦したのはフロントからバックエンドのAPIサーバ(Laravel)からデータを取るリクエストをする際のAccess-Control-Allow-Origin設定です。
どんな問題が発生したか?
ドメイン名が完全一致ではない、つまりsame-originではないのでCORS通信の設定が必要です。
今回発生したのはいくら.htaccessを弄ってもAccess-Control-Allow-Originが反映されないという問題です。
もちろん、httpd.confの.htaccessの許可は出しています。
.htaccessはLaravelプロジェクトのpublicフォルダにあるので、
Access-Control-Allow-Origin: "*"
の記述があるか確認……ない。
Access-Control-Allow-Origin: "xxx.example.jp"
を追記。httpdを再スタート。……また"*"はダメというエラー、なんで?とドツボにハマりました。
解決法
今回の問題はCORSというLaravelパッケージにありました。
LaravelのCORS通信をサポートする便利なパッケージなのですが、どうもこのパッケージがAccess-Control-Allow-Origin設定を変更していたのが問題でした。
config/cors.phpを開くと以下のような文がありました。
'allowed_origins' => ['*']
このallowed_originsという項目がAccess-Control-Allow-Originの設定になります。この設定を以下のように変えてやると無事繋がるようになりました。
'allowed_origins' => ['https://xxx.example.jp']
ここかーーーー!ってなりました!
終わり
めっちゃありがちなミスだと思いますが4時間ぐらい悩んだので私と同じLaravel初学者の方は参考にしてみてください!
私もまだまだ精進が必要だと思いました……、CORSには他にも色々設定があるので興味があれば調べてみてくださいね!
ご拝読いただきありがとうございました!