[CORS]への対応

CORS(Cross-Origin Resource Sharing)

ソース間共有リソース

HTTPヘッダを追加することで、あるソースで実行されるWebアプリケーションは、ブラウザに別のソースの選択されたリソースへのアクセスを許可することができます.-MDN -
ソース
ソース(ソース)はscheme、host、portで構成されています.
https://www.google.comというURLがある場合、ソースの構成は以下の通りです.scheme: https://Host: www.google.comPort: 443
ただし、セキュリティ上の理由から、ブラウザでは同じソース以外でリソースを共有することはできません.ここで最も重要なのは、CORSはブラウザに関連するポリシーです.

ソースは同じ(Same Origin)
scheme、host、portが同じであることを示します
簡単なCOS運動の原理を理解します
HTTPリクエストを他のソースに送信すると、ブラウザはリクエストヘッダのOriginフィールドに独自のOriginを設定します.
その後、サーバからの応答が受信された場合は、応答のAllow-Clol-Allow-Originヘッダに設定されているOriginリストに要求されたOriginヘッダ値が含まれているかどうかを確認するだけです.

解決策

Access-Control-Allow-Origin

サーバ側応答変更(サーバ制御が利用可能である場合)

MDNには추가 HTTP 헤더를 사용という言葉があります.これはresponse 헤더에 Access-Control-Allow-Origin 세팅で解決できることを意味します.
Nodeを使用する場合は、ミドルウェアCORSを使用して解決します.

const cors = require('cors');

app.use(cors()); 
// 옵션을 설정하여 특정 URL지정도 가능

🚫 ただし、ワイルドカード(*)の場合、Cookieなどの認証情報を含む要求は制限されるため、with Crementures:true}は使用できません(Pro-Proログインの問題もこの問題です).
したがって、Cookieなどのブラウザに格納されている認証情報を使用すると、
サーバ上で、
1.ワイルドカードではなく、許可されたソースを指定します.
2. Access-Control-Allow-Credentials: true

プロキシサーバ

webpackの使用時にプロキシサーバ

を使用
これはブラウザのポリシーですので、ブラウザと要求するサーバの間にプロキシサーバを個別に配置して解決できます.

devServer: {
  proxy: {
    '/api': {
      target: 'domain.com',
        changeOrigin: true
    }
  }
}

Reference

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

https://westsideelectronics.com/cors-and-how-to-fix/

https://joshua1988.github.io/webpack-guide/devtools/webpack-dev-server.html#%ED%94%84%EB%A1%9D%EC%8B%9C-proxy-%EC%84%A4%EC%A0%95