[TIL] CORS

👉 CORS

도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘.
이때 요청을 할때는 cross-origin HTTP에 의해 요청.
하지만 CORS 같은 상황이 발생 하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단하기 때문에, 정상적으로 데이터를 받을 수 없다.
ex) localhost:3000에서 react를 실행하였고, 서버는 localhost:8000에서 실행한다면, 포트가 달라서 CORS가 발생할 수 있는 상황

🐱‍🏍 해결방법

: 서버에서 cross-origin-HTTP 요청을 허가 해주는 것

1. Access-Control-Allow-Origin response 헤더를 추가

app.get('/data', (request, response) => {
    response.header('Access-Control-Allow-Origin', '*');
    response.send(data);
})

: 모든 클라이언트에 요청에 대한 cross-origin HTTP 요청을 허가하는 헤더를 추가 / BUT rest.api의 모든 응답에 추가하기는 힘들다.

2. node.js의 미들웨어 CORS 추가

npm install --save cors
yarn add cors

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

app.use(cors());	// CORS 미들웨어 추가

const corsOptions = {
    origin : 'http://localhost:3000', // 허락하고자 하는 요청 주소
    credentials : true, // true로 하면 설정한 내용을 response 헤더에 추가
};

app.use(cors(corsOptions)); // config 추가

✨

• CORS란 도메인 또는 포트가 다른 서버의 자원을 요청하면 발생하는 이슈
• 서버와 클라이언트가 분리되어 있는 앱에서는 cross-origin HTTP 요청을 서버에서 승인해주는 것이 좋다.

🐱‍🏍 리액트 개발환경에서

해당 이슈를 겪을 경우엔 webpack-dev-server proxy 기능을 사용하여 서버쪽 코드를 수정하지 않고 해당 이슈를 해결 가능
< https://create-react-app.dev/docs/proxying-api-requests-in-development >
< https://velog.io/@ground4ekd/nodejs-cra-proxy >