Q&A
ご回答ありがとうございます。
上記内容で解決いたしました！
前提・実現したいこと
Nuxt.jsとLaravelのAPI通信ができるようにしたい。
現在Nuxt.jsとLaravelで簡単なTodoリストを作っています。
Nuxt.jsからAxiosでAPIを叩いた時、CORSエラーが発生しました。
発生している問題・エラーメッセージ
Access to XMLHttpRequest at 'http://localhost:10080/api/tasks/create' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
デベロッパーツールのNetworkのエラーは以下の2枚になります。
試したこと
①DockerのNginxのdefalt.confファイルを確認
default.confにCORSの記述がないことを確認済みです。
LaravelでCORSが解決できない｜teratail
②PostmanでAPIが動くことを確認
③CORSの対応
こちらの記事を参考に、 CORS を作成し、カーネルに追加し、ルートを編集しました。
ただこれでもうまくいかなかったため、以下の記事を参考に、 プリフライトリクエストにも対応した形で変更しました。
ただ変わらずエラーが発生します。
それでは、よろしくお願いいたします。
回答2件
0
Laravel7以上なら最初からCORS対応している。
単に最初からlaravel-corsをインストールしているだけ＆Laravel6でも使えるのでこれを使えばいい。
https://github.com/fruitcake/laravel-cors
投稿2021/05/01 14:39
総合スコア10377
0
ベストアンサー
以下のエラーメッセージの意味ですが、
Access to XMLHttpRequest at 'http://localhost:10080/api/tasks/create' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
以下のレスポンスヘッダがないという意味です。これを追加する必要があります。
Access-Control-Allow-Credentials: true
また、それ以外にも、現在は以下のヘッダがでていますが、
Access-Control-Allow-Headers: Accept, X-Requested-With, Origin, Content-Type
X-XSRF-TOKENが足りません。余計なものもあるので、必要なもののみ記載すると以下が必要です。
Access-Control-Allow-Headers: Content-Type, X-XSRF-TOKEN
投稿2021/05/01 14:02
総合スコア11701
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/01 23:59 編集