CORS拡散器

開発者なら誰でも一度は遭遇するCORS...😡
もう二度と会わないで.
遭遇した時に慌てないように直接噴き出してCORSについて整理しておきます
CORS (Cross Domain)
🔍「Same Origin Policy」とは?
SOPは韓国語翻訳の同じソース政策だ.
これは、任意のソースから読み込まれたドキュメントまたはスクリプトが、他のソースからインポートされたリソースと対話することを制限する重要なセキュリティ方法です.同じソースポリシーは、有害なドキュメントを隔離することによって、攻撃を受ける可能性のあるパスを低減します.
ここで、同じソースを定義できる条件は、URLのプロトコル、ホスト、ポートが同じである.
EX)標準URL:http://store.company.com/dir/page.html

最終的に、「CORSエラー」と呼ばれるエラーは、SOPが他のソースからのリソースにアプリケーションでアクセスしようとしているためであり、「CORS」は、この場合、ソース間HTTP要求を発行することによってアクセス権限を付与するメカニズムを指す.
そのため、CORSエラーはサーバーではなくブラウザで発生したエラーです.
🛫解決策
1.サーバ開発者にお願い!!
サーバー開発者にCORSの設定を要求することができます.
CORS関連の設定を忘れてしまうことがあるので、確認を先に言っておけばいいです.
2.開発環境エージェントの設定
私はreactを書くので、react基準に従ってproxyを設定する方法は以下の通りです.
package.jsonに次のコードを追加します.
apiサーバのドメインを次のコードhttp://my-api-server.comの部分に代入する

"proxy": "http://my-api-server.com"

3.プロキシサーバーの構築
📃リファレンス
https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy
https://velog.io/@takeknowledge/%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-CORS-policy-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3gk4gyhreu
https://velog.io/@vraimentres/CORS
https://velog.io/@young_pallete/CORS