React CORS 설정

✒️ 2025-05-28 10:24 내용 수정

허용설정

• 참고 자료 : Inpa dev's NODE cors 모듈 - CORS 간편 설정하기
• 참고자료에도 언급되어 있듯 모든 출처에 대해서 허용하는 경우 보안 문제가 발생할 수 있어 필요 시 특정 도메인만 허용하도록 설정하는 것이 좋다.

1. 서버의 응답 헤더에 Access-Control-Allow-Origin 헤더를 추가
   • 클라이언트 도메인의 요청을 허락해준다.

res.setHeader("Access-Control-Allow-Origin", "*"); // 모든 출처 허용
res.end();

2. cors 미들웨어 사용
   • 서버에서 CORS 체제를 사용할 수 있도록 하는 미들웨어다.
   • VSC 터미널에서 npm install cors로 설치한다.

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

app.use(cors([
	origin: '*' // 모든 출처 허용
]));

3. 클라이언트에서 프록시 설정

• 클라이언트의 package.json에 proxy 설정을 추가한다.

// 맨 하단에 proxy 설정 추가, server의 url을 입력한다
// "proxy" : "serverURL"
"proxy" : "http://localhost/10000"

쿠키 허용 설정

• 참고 자료 : Inpa dev's CORS 쿠키 전송하기(withCredentials 옵션)
• 서버와 클라이언트가 같은 호스트이고, 다른 포트를 사용하는 경우 요청과 응답에 쿠키를 허용하고 싶은 경우 각각에 쿠키 허용 옵션을 설정해야 한다.
  • 참고 자료에도 명시되어 있듯 별도의 옵션 없이 브라우저의 쿠키와 같은 인증 관련 데이터를 요청에 함부로 담지 않도록 되어 있어 추가 설정을 진행해야 한다.
• 팀 프로젝트에서 React로 프론트를 제작하고, node express로 서버를 제작했다.

1. 클라이언트 설정 : 클라이언트에서 서버로 요청할 때는 axios를 사용했기에 axios에서 withCredentials 옵션을 지정했다.

// src/lib/axios.js
import axios from 'axios';
axios.defaults.withCredentials = true; // 쿠키 공유 허용

2. 서버 설정 : express에서 설정 시 cors 미들웨어를 사용하여 처리할 수 있다.

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

app.use(cors([
	origin: '*', // 모든 출처 허용
	credential : 'true'
]));