CORS

: 현재 브라우저 접속중인 페이지에서 자바스크립트를 이용해 다른 도메인 또는 포트를 가진 주소를 요청하는 경우, 해당 리소스에 접근을 허용했는지 확인해 보안을 높이는 동작

• 브라우저는 주소가 다른 경우 리소스의 출처가 다르다고 판단
  • CORS 동작(A주소를 B주소에 요청할 때 OPTIONS 메서드를 이용해 요청을 허용하고 있는지 확인(CORS preflight)
• 브라우저에 구현된 비동기 요청 API에서만 동작하는 규칙
  
  

cors 에러 방지 방법

• 서버에 Access-Control-Allow-Origin 응답 헤더를 추가하면 된다(options 메소드에)

res.setHeader('Access-Control-Allow-origin', '*');
res.setHeader('Access-Control-Allow-Credentials', 'true');// 쿠키 주고 받기 허용

res.end();

• cors 모듈을 사용

> npm i cors

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

app.use(cors({
  origin: true,// 모든 출처 허용 옵션. *를 써도 됨
  credential: true //사용자 인증이 필요한 리소스(쿠키 등) 접근
  //다른 도메인간에 쿠키 공유 허용
}))
//'Access-Control-Allow-origin' Header가 자동으로 추가

모든 cors 요청 허용은 보안상의 문제가 있을 수 있어 특정 주소만 허용하는게 좋다

const corsOptions = {
  origin: 'http://localhost:...',
  credentials: true
}

app.use(cors(corsOptions))

*참고로 axios에서도 도메인이 다른데, 쿠키를 공유해야 하는 경우 withCredentials: true 옵션으로 요청

*cors test site: https://www.test-cors.org/

참조
https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-cors-%EB%AA%A8%EB%93%88