[node.js/CORS] CORS 문제 해결하기

회원가입을 진행해보니 아래와 같은 에러가 발생하는 것을 확인할 수 있었다. CORS 문제이다.

CORS(Cross-origin resource sharing)란? 간단하게 말하면 서로 다른 도메인에서 요청이 오갈때 발생하는 문제이다.
이 문제는 브라우저에서 차단하기 때문에 발생한다.

Access to XMLHttpRequest at 'http://localhost:3065/user' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

이 문제는 localhost 3000인 브라우저에서 서버로 바로 요청을 보내기 때문에 발생하는 문제인데, 해결하기 위해 방법이 몇가지 있는데

1. 프록시(proxy) 방식을 활용
이 방식은 서버에서 서버로 요청이 갈때는 cors문제가 생기지 않기 때문에 브라우저 > 서버로 바로 요청이 가는 것이 아닌
브라우저 > 프론트 서버 > 백 서버 방식으로 요청을 가게 한다

2. 백 서버에서 Access-Control-Allow-Origin을 설정해준다.
이것은 요청이 올 도메인을 따로 적어 허용해 주는 방식인데, *를 넣을 경우 모두 허용한다는 뜻이다.

res.setHeader('Access-Control-Allow-Origin', "*");
res.setHeader('Access-Control-Allow-Origin', "http://허용할 도메인");

3. middleware를 통한 cors 해결

$npm install cors

app.js

server.use(
  cors({
    origin: '*', // 허용할 도메인 입력
    credentials: true,
  })
);

이와 같이 middleware를 통해 cors 문제를 해결할 수 있다.