【HTTPS】CORSとは？

ふだんはフロントエンドの開発を中心に行っているのですが、CORSに関連するエラー発生しました。
APIのレスポンスをアプリ側では受け取ることができますが、Webでは受け取れないという問題でした。
これを良い機会にして、CORSに関して簡単にさらっていこうかと思いました。
本当に簡単にさらうだけなので、詳しい開発に関することにはげんきゅうしません。
あらかじめご了承。

CORSの定義

そもそもCORSとは一体なんなのでしょうか。
日本語でいうならば、クロスオリジンリソース共有といいます。
AWSのサイトでは以下のように説明されていました。

クロスオリジンリソース共有 (CORS) は、アプリケーションを統合するためのメカニズムです。CORS は、特定のドメインにロードされたクライアントウェブアプリケーションが異なるドメイン内のリソースと通信する方法を定義します。複雑なアプリケーションはクライアント側のコードでサードパーティーの API やリソースを参照することが多いため、CORS が役立ちます。例えば、アプリケーションはブラウザを使用して動画プラットフォーム API から動画をプルしたり、公開フォントライブラリのフォントを使用したり、全国の気象データベースから気象データを表示したりできます。CORS を使用すると、クライアントブラウザは、データ転送の前にリクエストが認可されているかどうかをサードパーティーのサーバーに確認することができます。

AWS

ぬぬ、、、ぱっと見た感じむずかしそうやな、、、
とにかく、異なるサイト間の情報共有を可能にする仕組みであることは間違いなさそう。

まず、オリジンとは〜〜〜〜.comというものですね。
オリジンには以下のようなものを含んでいますね。

• スキーム（別名プロトコル）

  • http://

  • https://

• ホスト（別名ドメイン）

  • hogehoge.com

• ポート

こいつらで構成されたものがオリジンであるみたいですね！
そして、このスキーム、ホスト、ポートが同じであるオリジンを同一オリジンとよばれているようですね。

ここまででなんと苦なくわかってきた気がしますね！
つまり、違うオリジン同士でもなにか情報を言ったり来たりできるようにするシステムのことを指しているそうですね！

APIのレスポンスをアプリで受け取れるがWebでは受け取れない問題

設定に誤りがあると、アプリではAPIのレスポンスを受け取れても、Webでは受け取れないといった問題が発生することがありえますね！

サーバー側でAPIのCORS設定を確認し、Webブラウザとアプリのオリジンが許可リストに含まれていることを確認することが必要となってきます！

まとめ

CORS設定は、アプリとWebブラウザで同じように設定する必要があることがわかりました！。
設定が異なると、WebブラウザでAPIのレスポンスを受け取ることができなくなる可能性があります。。。

上記の内容を参考に、問題解決に役立てていただければ幸いです！！！