ブラウザから違うドメインにAPIリクエストをした際に、以下のエラーが発生
Access to XMLHttpRequest at 'http://xxxxx' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
原因
ドメインが違うサイトにリクエストを送る時、クライアント(送信元のサイト)からのリクエストを許可していないときに起こるエラー
解決策は３つ
- リクエストを送りたいサイトに、自分のサイトのドメインからのリクエストを許可してもらう。
- Chromeの拡張機能 CORS Unblock を使ってリクエストを送れるようにする
- サーバサイド(Nodeやphpなど)からリクエストを送る。
実施した解決策
リクエストの送信先がLaravelで作っている自作APIだったので、1 の方法を実施。
具体的には、laravelに新しくCORSを許可するミドルウェアを作成して、router.php で該当のAPIリクエストにミドルウェアを適応することで解決。