frbet - cors

cors(Access-Control-Allow-Origin)
서로 다른 도메인이 서로 통신을 하기 위한 규약

access - 접근
control - 제어하다
allow - 허용하다
origin - 기원..?

갑자기 기원이라는 단어가 왜 나오는지..?
여기서 말하는 Origin은 프로토콜 + 주소 + 포트번호 를 말한다.

Origin = [프로토콜]://[Host의 IP 주소 또는 URL]:[포트번호]

아~ 그러면 서로 다른 origin 에서 데이터를 읽거나 쓰는 행동 및 접근을 제어하거나 허용한다~ 그런 말이구나~

즉, 다른 도메인에서 데이터를 가져오거나 보내고 싶을 때는 CROS 정책을 지키면서 접근을 허용해달라고 하는 것이다.

그럼 이제 로컬에서 개발을 할때는 다른 주소는 다 같지만 포트번호를 다르게 세팅하고 client와 server 간의 공유를 하기 때문에 cors 정책이 필요한 것이다.

해결방법 1

app.get('/', (req,res) => {
  res.header("Access-Control-Allow-Origin", "*");
  ...
}

특정 라우팅에서만 허락하고 싶다면

해결방법 2

// app.ts
const corsOptions = {
  origin: 'http://localhost:3000',
  credentials: true, 
};
app.use(cors(corsOptions))

cors를 미들웨어로 설정한다. 특정 url에서만 cors정책을 허용하고 싶다면 위와 같이 option을 따로 설정할 수 있다.