[Web] CORS

クロスソースリソース共有とは?

使用HTTP同じソース(同じURL)で実行されていることをブラウザで通知するWeb App他のソース(異なるURL)で選択したリソースへのアクセス権限を付与する

例

https://domain-a.com医JavaScriptコードリクエストhttps://domain-a.com/data.jsonセキュリティ上の理由から、ブラウザはHTTP要求を制限する

HTTPリクエストによるCORSの使用

XMLHttpRequest・Fetch()コール等

ウェブフォント使用時

WebGL

使用

drawImage()・Canvasで描かれた画像またはフレーム

画像から抽出したCSS Shapes

単純な例

https://foo.exampleの内容https://bar.other

const xhr = new XMLHttpRequest();
const url = 'https://bar.other/resources/public-data/';

xhr.open('GET', url);
xhr.onreadystatechange = someHandler;
xhr.send();

上記の場合、ブラウザはサーバの応答を確認します.Origin: https://foo.exampleリクエスト確認可
サーバ
転送Response

の最後の部分

NodeやNestを勉強している間はあまり気にならなかったのですが、後でフロントに接続した時は本当に何度も予測していたミスはありませんでした・・・混んでいた時は思い出せなかったけど、外に出ると思っていたのが合っていたので整理してみました.
参考になるところ
CORS - Mozilla