kmmkの雑種系日記

学習まとめです。

No 'Access-Control-Allow-Origin' header is present on the requested resource.の対処法

はじめに

少し前にこのようなツイートをして、時間のあるときに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

対処法

レスポンスヘッダーにアクセスを許可できる印をつけてあげることで解消する

->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');
}

今回はプロトタイプなので*で全てにアクセス許可を与えていますが、進捗が上がってくればその辺りも再度見直そうかと思います。

参考

オリジン間リソース共有 (CORS) - HTTP | MDN

HTTPレスポンス 5.5 Laravel