CORSエラー解決方案

CORSエラー解決方案

以前corsライブラリで位置決めして解決する方法がありましたが、学習中に他の方法があるそうなので、整理してから位置決めします.

1.なぜCORSエラーが発生したのか

上図のソースはMDNです.まず、CORSエラーが発生した原因をもう一度知りたいです.
CORSエラーはセキュリティ上の理由で発生したエラーで、ブラウザでは自分のソースと同じリソースしか許可されず、他のソースがリソースに近づくとCORSエラーが発生します.
この問題を解決するために、サーバは、特定のヘッダAccess Control Allow-Originとともに応答する必要があります.

2.CORSソリューション1-プロキシサーバの使用(他のユーザによって作成)

1つ目の方法は、他の人が作成したプロキシサーバを使用することです.プロキシサーバを使用する場合、要求自体は要求によってバイパスされ、プロキシサーバは要求をHTTP応答ヘッダにブロックし、アクセス制御-すべてのOriginを設定します.
https://cors-anywhere.herokuapp.comのようなサイトがあります.
設定方法は、クライアントリクエスト時に、使用するapi urlの前にプロキシサーバアドレスを貼り付けるだけです.プロキシサーバアドレスとapi urlの違いは「/」です.

3.CORSソリューション2サーバでのアクセス制御の設定-すべてのOrigin

2つ目の方法は、サーバ上でアクセス制御Allow-originを設定することです.api応答値に設定すればいいです.

res.header("Access-Control-Allow-Origin", "허가 할 도메인")

これでいいです.すべてのソースを許可したい場合は、後で*を入力します.

4.CORSソリューション3-CORSライブラリの使用

https://velog.io/@joo0/CORS-Cross-Origin-Resource-Sharing
正直、この方法が一番便利で良かったのですが、なぜこのような問題が発生したのか、原理的な解決方法も良かったのでまとめてみました.