TIL 211127 | CORS

CORS

Cross-origineリソース共有の略で、ドメインまたはプロトコル、ポートが他のサーバ上のリソースを要求するメカニズムを指します.
ブラウザ独自のCORSポリシーがあります.
クライアントとサーバが同じip上で(つまり同じサーバ上で)動作している場合、リソースを制限なく共有および交換できます.
しかし,クライアントとサーバが異なるip上にある場合,原則としていかなるデータも互いに交換できない.
この場合、サーバがクライアントに応答を送信と、
タイトルにACCES-Control-Allow-Originを追加
クライアントはサーバのライセンスを取得します.このデータをインポートしてタグ付けして、クライアントでデータを表示できます.
基本的に,他のIP上でのデータ共有は不可能である.
この問題を解決するには、サーバがヘッダにアクセス制御Allow-originを追加する必要があります.
従って、以下のミドルウェアで設定すべきである

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
  res.setHeader(
    'Access-Control-Allow-Methods',
    'OPTIONS, GET, POST, PUT, DELETE'
  );
  next();
});

このように使用すると、タイトル名を正確に知らなければならない点が不便です.
ヘッダーを指定しても少し誤字があっても起動できません.
しかし、corsミドルウェアがあります.私たちはこのようにタイプする必要はありません.
npm i corsでインストール
corsからcorsをインポートします.
あとはappuse(cors());
オプションがない場合は、app.use(cors());に設定すると、すべてのcross-originリクエストに応答します.特定のドメインリクエストのみを受け入れるか、特定のリクエストのみに応答する場合は、適切なオプションを設定する必要があります.

特定のドメインへのアクセスを許可するオプション。

app.use(cors({
  origin: 'http://127.0.0.1:5500',
  optionsSuccessStatus: 200,
  Credentials: true,// 응답 헤더에 Access-Control-Allow-Credentials 추가
}));