Proxy 서버로 CORS 해결하기

cors 문제를 해결하는 방법에는 두 가지가 있다.

1. 서버에서 CORS 해결
2. 클라이언트에서 proxy 서버 이용

2번 방법을 통해 cors를 해결해보자. react를 배포했을 시 nginx 서버를 사용했다면 proxy_pass를 통해 쉽게 해결할 수 있다.

 

nginx를 사용하여 cors 해결하기

다음과 같이 설정 파일에 원하는 api endpoint를 지정하여 proxy_pass로 해당 api 서버 주소를 적어주면 된다. 이후 /api/*로 호출하는 경우 해당 리액트 앱의 도메인:포트를 거쳐 호출되므로 cors가 발생하지 않는다.

/etc/nginx/conf.d/default.conf

client_max_body_size 200M;

server {
    #add_header Access-Control-Allow-Origin *;
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        root    /app/dist;
        index   index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:5000;
    }
}

 

vite 애플리케이션 개발시 프록시 지정

vite 애플리케이션 개발 시에 프록시를 지정하고 싶다면 vite.config.ts를 수정하여 proxy 설정을 추가해주면 된다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [react()],
  assetsInclude: ['**/*.jpg', '**/*.png'],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
      },
    },
  },
});