[NodeJS] CORS Error 해결하기

React로 만든 프론트에서 axios를 통해 nodejs로 만든 api를 요청했더니 CORS 에러가 계속 발생했다.

분명 url로 들어가면 데이터를 잘 받아오는데, 왜 axios를 통해서 요청을 하게 되면 에러가 발생하는지 ..🤦🏻‍♀️

 

Access to fetch at 'http://localhost:8080/test' from orgin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response servers your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

port 8080으로 요청했는데 자꾸 리액트의 3000으로 잡아서 에러가 발생한거 같았다.

 

🔆 해결방법

프론트엔드에서 proxy 설정을 하는 방법이 있지만,

좀 더 안전한 방법으로 백엔드에서 response header에 Access-Control-Allow-Origin 설정을 하기로 했다.

 

✅ 필요한 api에 res.header("Access-Control-Allow-Origin", "*"); 를 넣어주면 되지만, 모든 api에 대해서 설정하고 싶으면 모듈을 설치해서 사용하면 된다.

 

🔆 모듈 설치해서 해결하기

• 해당 프로젝트 폴더로 이동해서 커맨드 실행
• app.js(자신이 사용하는 시작 단계의 파일)로 들어가서 커맨드 실행

npm install --save cors

 

• app.js(자신이 사용하는 시작 단계의 파일)로 들어가서

const cors = require('cors')

let corsOptions = {
  origin: '*',      // 출처 허용 옵션
  credential: true, // 사용자 인증이 필요한 리소스(쿠키 등) 접근
}

app.use(cors(corsOptions))

를 추가해주면 된다.