React로 만든 프론트에서 axios를 통해 nodejs로 만든 api를 요청했더니 CORS 에러가 계속 발생했다. 분명 url로 들어가면 데이터를 잘 받아오는데, 왜 axios를 통해서 요청을 하게 되면 에러가 발생하는지 궁금했다.
원인
CORS(Cross-Origin Resource Sharing) 란?
지정된 도메인 외부에 있는 자원에 대한 접근을 통제하는 브라우저 메커니즘으로 자원에 대한 접근은 http 헤더를 사용하여 허용하는것을 말한다.
하지만 내가 요청했던 url은 포트번호가 달랐기 때문에 허용이 되지 않았던 것이다.
해결방법
프론트엔드에서 proxy 설정을 하는 방법이 있지만, 좀 더 안전한 방법으로
백엔드에서 response header에 Access-Control-Allow-Origin 설정을 하기로 했다.
- 필요한 api에
res.header("Access-Control-Allow-Origin", "*");를 넣어주면 되지만, 모든 api에 대해서 설정하고 싶으면 모듈을 설치해서 사용하면 된다.
모듈 설치해서 해결하기
- 해당 프로젝트 폴더로 이동해서
npm install --save cors커맨드 실행 app.js(자신이 사용하는 시작 단계의 파일)로 들어가서
const cors = require('cors')
let corsOptions = {
origin: '*', // 출처 허용 옵션
credential: true, // 사용자 인증이 필요한 리소스(쿠키 등) 접근
}
app.use(cors(corsOptions))를 추가해주면 된다.
