No 'Access-Control-Allow-Origin' header is present on the requested resource.の対処法
はじめに
色々あって、Vue.js+Nuxt.js + Laravelで何か作ろうと思う
— kmmk＠Vue.jsの鬼になるマン (@kami_tsukai) October 4, 2019
少し前にこのようなツイートをして、時間のあるときにAPIサーバーをLaravel、フロント側をNuxt.jsで書いています。
LaravelでAPIを作り、axiosで取得しようとした時にそれは発生しました。
Access to XMLHttpRequest at 'xxxxx' from origin 'xxxxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
なぬ？ということで調べてみると、今回の原因はどうやらCORSが関係しているらしい。
CORSとは？
現在のWebブラウザでは、あるWebサイトが持つ情報が別の悪意あるWebサイトに悪用されるのを防ぐために、Same-Origin Policy(日本語では同一生成元ポリシー)が適用されます。
例えば、あるWebサイト https://guiltysite.com をブラウザで表示している時に、このWebページからXMLHttpRequest(以下、XHR)やFetch APIで別のWebサイト https://innocentsite.net からHTTP(S)でデータを読み込もうとすると、エラーになる、というわけです。
しかし、アクセス元が悪意あるWebサイトならともかく、データの連携をする相手として信頼関係ができているWebサイトにまで制限をかけてしまうと不便ですので、データのアクセスを許可できるWebサイトに対してはOriginを越えたアクセスを可能にするための仕組みとして、CORSがあります。
同一オリジンポリシーの制限を受けるWebAPI
- XMLHttpRequest
- Canvas
- Web Storage
- X-Frame-Options
対処法
レスポンスヘッダーにアクセスを許可できる印をつけてあげることで解消する
->header('Access-Control-Allow-Origin', '*');
controller
public function index(){
//処理
return response()->json($item)->header('Access-Control-Allow-Origin', '*');
}
or
public function index(){
//処理
return response()->json($item)->header('Access-Control-Allow-Origin', 'http://localhost:3000');
}
今回はプロトタイプなので*で全てにアクセス許可を与えていますが、進捗が上がってくればその辺りも再度見直そうかと思います。
