axiosでAPI連携したときにconsoleにCORSエラーが出て表示されなかった件(Laravel×Vue.js)

概要

Vue3とLaravel8を使ってAPI通信で遊んでいたら遭遇したエラーです。
遭遇したのが初めての内容だったので、備忘録も兼ねて記載させていただきます。

エラー文

console.logエラー

Access to XMLHttpRequest at 'https://newsapi.org/v2/everything?q=Economy&apiKey=32e3595e76c247fea16c5fd7d7bb2df2' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response

事象が発生したタイミング

News API利用時に発生
AXIOSでAPI通信を実施した際に、コンソールにエラー表示確認。
通信が遮断され、データのResponse確認できず困ってしまった・・・。

解決方法

resources/js/bootstrap.jsにて

resources/js/bootstrap.js

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

が記載されているため、通信ができなかった。

コメントアウトして解決。

参考にさせていただいたサイト。
https://cpoint-lab.co.jp/article/202104/19526/

そもそもCORSってなんじゃ？

MDNに記載がありました。

CORS (オリジン間リソース共有、 Cross-Origin Resource Sharing) は、 HTTP ヘッダーの転送で構成されるシステムであり、ブラウザーがオリジンをまたいだリクエストのレスポンスに、フロントエンドの JavaScript コードがアクセスすることをブロックするかどうかを決めるものです。

だそうです。
ほえ〜、そんな機能があるんだなぁ。

ソース。
https://developer.mozilla.org/ja/docs/Glossary/CORS

最後に

いかがだったでしょうか。
今後もvue.js,Laravel中心に記事書いていきますので、フォローお願いします！