かざいむ日誌

IT関係で知ったことなどを記事としてあげていきます。内容に不備や質問などあればぜひコメントをよせてください。

CORS errorが起きました、という相談

職場の違う後輩からSlackで相談が入り以下のようなやり取りをした。

 

後輩:開発環境をローカルに作成したが、ローカルのフロントエンドからローカルのバックエンドへのAPI通信の際にCORS errorというエラーが出てしまう。
mozillaのドキュメント等を見ているが、解決できておらず、もし他に良いググるキーワードなどがあれば教えてほしい。

私:複数のドメインへのリクエストが混ざってるのでエラーになる。クロスオリジンを許可すれば解決するはず。
https://stackoverflow.com/questions/18642828/origin-origin-is-not-allowed-by-access-control-allow-origin

後輩:一緒のドメインです。

私:ポートも含めて判断するのでポートも同じか確認して

後輩:(エラーメッセージを送ってくる。一部改変)
Access to fetch at 'http://localhost:9000' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

後輩:送ってもらったリンクを見て設定を変えたら、エラーが500になった

 

背景として、後輩はバックエンドの開発に参加したばかりで環境を構築して動かなかった、Web系の構成になっているあたりの情報があったため、ページをホストするサービスと、Web APIが異なると判断して、上記の返事をしました。

 

エラーが500という事はWeb APIにはおそらくリクエストが届いて、内部エラーとなったので、とりあえず一歩前進と思われる。現時点での進捗はここまで。

 

そもそも、CORS は Cross-Origin Resource Sharingで、あるドメイン・サーバでホストしているアプリケーションに他のドメイン・サーバにアクセス権を与えるか制御するもの。元のアプリケーションのHTTPレスポンスのヘッダーにどこにアクセスしていいかを記載することで、XSSCSRFなどの攻撃が起きにくくすることができる。

 

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

 

おそらく、今回の事象は環境構築した際に、ホスト、ポートの設定が変わってしまい、アプリケーションを動かした時にバックエンドのAPIが起動しなかったものと推察される。

対処としては、バックエンドのドメイン・ポート=オリジンに対してアクセス権を与える。与える方法は、HTMLをホストしているサーバのHTTPレスポンスヘッダーに、Access-Control-Allow-Originでバックエンドのオリジンを指定する。