프론트엔드에서의 프록시

프록시 사진

---

프론트에서 프록시 설정을 하기 전에, 일단 프록시가 무엇인지는 다음 글을 읽어보면 알 수 있다. 

https://velog.io/@wlwl99/Proxy

Proxy

---

로컬 헤더는 http로 시작된다. 그러나 배포가 될 때에는 https로 배포가 된다.

근데 이때에 백엔드와 api 통신을 하게 되는데, 백엔드 친화적으로 소통하는 것이 편하다. (경험적임)

swagger에서 api 타겟의 헤더 값을 https로 맞추어야 나중에 배포를 편하게 할 수 있다. 물론 https로 헤더 값이 타겟이 되고 프론트에서 로컬 서버는 http로 시작되기 때문에 프론트에서 "프록시"를 설정해주어야 한다.

기본적인 코드는 다음과 같다.

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://(swagger url)',
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

코드 짜임새는 비슷하고 중간의 target 부분의 url은 백엔드에서 제공해주는 api 베이스 url를 넣어주는 것이다.

이렇게 하면 로컬에서도 소통이 가능하고, 배포에서도 애초부터 https로 서로 헤더값을 맞추었기에 소통이 가능해진다.

결국 중요한 것은 "백엔드" 이 편하게 맞추어주는 것이다. 프록시 설정을 프론트에서 하는 것이 더 심플하기 때문이다. 이렇게 안하고 반대로 한다면 백엔드는 엄청 힘들어진다.

관련 글

https://20240228.tistory.com/138

프록시를 통한 CORS 프론트에서 해결하기