CORS 프록시(proxy) 방식으로 우회

React에서 CORS 문제를 **라우팅 우회(proxy)**로 해결하는 방법은 주로 **개발 환경(로컬)**에서 사용되며, create-react-app 환경이나 vite, next.js 등에서도 설정 가능합니다. 여기선 대표적으로 React CRA 환경과 Next.js 기준으로 설명드립니다.

---

✅ 1. CORS 문제란?

CORS(Cross-Origin Resource Sharing)는 브라우저가 보안상 다른 도메인(출처)의 리소스 요청을 제한하는 정책입니다.

예:
http://localhost:3000에서 http://api.example.com로 요청 → CORS 에러 발생 가능

---

✅ 2. 프록시(proxy) 방식으로 우회하는 원리

React 개발 서버가 중간 프록시 서버 역할을 하여 브라우저는 같은 origin으로 보이게 만들어 CORS를 우회합니다.

[브라우저] → [React dev server (localhost:3000)] → [API 서버]

---

✅ 3. CRA (Create React App) 환경에서 설정

📄 package.json에 proxy 추가:

{
  "proxy": "http://api.example.com"
}

🔁 예: 실제 요청 코드

// 원래는 이렇게 직접 요청하면 CORS 발생
fetch("http://api.example.com/data")

// proxy가 설정되었으면 이렇게 우회 가능
fetch("/data")  // → React dev server가 http://api.example.com/data로 포워딩

---

✅ 4. Vite 환경

📄 vite.config.ts

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
});

---

✅ 5. Next.js 환경

📄 next.config.js에서 rewrite 설정:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://api.example.com/:path*'
      }
    ];
  }
};

→ /api/test로 요청 → 실제로는 http://api.example.com/test로 프록시됨.

---

❗주의사항

• 이 방법은 개발 환경 전용입니다.
• 운영 환경에서는 Nginx 리버스 프록시, API 서버에서 CORS 허용 헤더 설정(Access-Control-Allow-Origin)이 필요합니다.
• 보안이나 인증이 필요한 경우 proxy만으로는 충분하지 않으며, 백엔드에서 적절한 CORS 정책 수립이 필수입니다.

---

🔚 정리

환경 설정 방식

CRA	package.json의 proxy 키 사용
Vite	vite.config.ts의 server.proxy 사용
Next.js	next.config.js의 rewrites 설정

proxy 설정만으로도 개발 환경에서 대부분의 CORS 문제는 우회 가능합니다.

---

더 구체적인 예시가 필요하면 사용하는 환경(CRA, Vite, Next.js 등)을 알려주세요!