CORS 에러, 프록시로 해결하기.

[kwag93]

프론트 개발하면서 서버와 연결시 가장 많이 보는 에러가 CORS 이다.

원인은 단순한데, 브라우저는 다른 출처(origin)에서 온 요청을 막는다는 규칙 때문.

프론트: http://localhost:3000

백엔드: http://localhost:8080

브라우저 입장에선 출처가 다르니 바로 CORS 에러가 발생한다.

이를 위한 해결책으로 프록시를 사용해보자.
프론트에서 바로 API를 호출하지 말고, 같은 출처처럼 보이도록 프록시를 거치기.

예시로 개발 환경에서는 Vite Proxy 사용이 가능하다

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
})

운영 환경에서는 nginx 를 쓴다고 가정할때, reverse proxy 설정을 넣어보자

server {
  listen 80;
  server_name myapp.com;

  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri /index.html;
  }

  location /api {
    proxy_pass http://backend:8080;
  }
}

물론, 서버에서 cors 를 받아주는 방식으로도 가능하지만 되도록이면 같은 상황에서 배포가 된다면 프록시를 사용하도록 하자