CORS: Cross Origin Resource Sharing
HttpRequest를 할 때 많이 보이는 에러다.
같은 endpoint로부터 오는 요청에 의해서만 Resource를 허락한다는 뜻인데, 예를 들면 localhost:3000과 localhost:5000은 endpoint가 다르기 때문에 CORS 오류가 발생된다.
이런 오류는 대부분 서버 측 오류보다는 프론트단의 오류일 경우가 대부분이다.
CORS는 브라우저의 보안 개념이기 때문이다.
CORS를 해결하기 위해서, 서버는 클라이언트의 요청을 받고 보내는 응답에 특정 Header를 첨부해야 하고, 클라이언트가 Resource에 접근하면 브라우저가 특정 Header를 감지하고 확인할 수 있게 해야한다.
// express - app.js
app.use(bodyParser.json());
// CORS 해결하기 위한 Headers설정.
app.use((req,res,next)=> {
// 접근할 수 있는 호스트를 설정한다. '*'같은 경우 모든 도메인을 허용한다.
res.setHeader('Access-Control-Allow-Origin', '*');
// 들어올 수 있는 RequestHeader를 설정한다.
res.setHeader('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type','Accept','Authorization')
// 들어올 수 있는 Http Request Method를 설정한다.
res.setHeader('Access-Control-Allow-Methods','GET,POST,PATCH,DELETE')
next();
})3가지 설정, Origin,Headers,Methods를 통해 앞단에서의 요청 조건을 설정할 수 있다.
