CORS

「Cross Origin Resource Sharing」

ブラウザには、特定のソースからロードされたドキュメントまたはスクリプトが他のソースからインポートされたリソースと相互作用することを制限するSOP(Same Origin Policy-同じソースポリシー)と呼ばれるブラウザセキュリティ方式があります.
同源は3つの等価によって区別される
そのうちの1つが異なると、別のソースとみなされます.
protocol   host   port
例えば、http://localhost:3000は、
protocol(scheme) >> http://
host >> localhost
port >> :3000
CORSは、HTTPヘッダを使用して、あるソース上で実行されるWebアプリケーションがブラウザに通知し、別のソースの選択されたリソースにアクセスできるようにする
次の図に示すように、リクエスト先サーバにタイトルを設定したり、他のソースからアクセスしたりすることもできます.

const express = require('express')
const app = express()

app.post('/getCookie',(req,res)=>{
  res.setHeader('Access-Control-Allow-Origin','http://localhost:4000')
  res.setHeader('Access-Control-Allow-Methods','POST, GET, OPTIONS, DELETE')
  res.setHeader('Access-Control-Allow-Credentials','true')
  res.setHeader('Access-Control-Allow-Headers','Content-type')
  
  res.send('cookie~?')
})

すべてのサーバへの応答を1つ1つ作成するのは難しいので、corslibraryを使用するとより簡単に完了できます.

const express = require('express');
const cors = require("cors");

const app = express();

const corsOptions = {
  origin: 'http://localhost:4000',
  methods: 'POST, GET, OPTIONS, DELETE',
  credentials: 'true',
  allowHeaders: 'Content-type'
}

app.use(cors(corsOptions));



app.post('/getCookie',(req,res)=>{
  res.send('cookie~?')
})

*フロントエンドhtmlからaxiosにサーバ側リソースを受信する場合、主にCORSエラーに直面します.CORSはブラウザによって制限されているため、サーバ間で直接通信する場合はブラウザを通じて発生しません.

CORSとSOPについての記事

なぜローカルでCORSポリシーに関連するエラーが発生したのですか?

CORSの詳細は、次のとおりです。

ソース間共有リソース[MDN]
https://homoefficio.github.io/2015/07/21/Cross-Origin-Resource-Sharing/