Learn CORS in 6 Minutes

https://youtu.be/PNtFSVU-YTI?si=P8Vwr2GH4Kj0Ku_R

 

예컨대 위와 같은 코드를 만들었다고 하자.

• 서버는 localhost:3000에서 실행되고, /data 로 들어오는 Get 요청에 정해진 값을 응답한다.
• 클라이언트는 localhost:5500에서 실행되고, 서버인 localhost:3000 에 요청을 보낸다.

클라이언트가 서버로 요청을 보내면 CORS 에러가 발생한다. No "Access-Control-Allow-Origin" header is present on the requested resources.

• In order to Allow a request to go from One Origin to Another; Tell the browser we allow that type of request.

서버는 기본적으로 Same Origin에서 오는 request만 허용한다. 따라서 서버가 Different Origin에서 오는 요청을 허용하도록 하려면 CORS header를 설정해줘야 한다.

• CORS 지원하는 라이브러리 / 패키지는 런타임 종류별로 다 있음. 예시의 경우 Express를 사용했으므로 cors 패키지를 적용.
• cors 패키지를 적용한 뒤 Request를 보면 Access-Control-Allow-Origin header에 127.0.0.1:5500이 포함된 것을 볼 수 있다.
  • 해당 origin으로 오는 요청은 Allow하라는 뜻.
• 모든 origin을 허용하려면 * (asterisk)를 명시하면 됨.

이걸로 GET / POST 관련 문제는 해결할 수 있음.

• Put 등 다른 종류의 request를 서버로 보낼 경우, 클라이언트는 서버로 Preflight request (OPTIONS) 요청을 보낸다.
• nodejs의 cors 패키지를 쓰고 있다면, Access-Control-Allow-Methods header에 모든 종류의 method가 자동으로 허용됨.
  • 허용하고 싶은 method를 명시할 수도 있음

default: request에 cookies 등의 값을 넣어보낼 수 없도록 되어 있음. blocked.

• cors에서 credentials: true 옵션을 제공하면 된다.