배포 후 API Response가 제대로 오지 않는 문제

문제 상황

빌드 후 배포 사이트에서 api 요청에 대한 응답으로 index.html만 보이는 상황이 발생

문제 원인

Proxy는 개발 서버에서만 작동하기 때문에 배포 환경에서는 프록시의 타겟으로 설정한 백엔드 서버의 주소가 /api와 매칭되지 않아 생긴 문제

해결시도

Vite의 Proxy 설정이 제대로 작성되어 있는가?

Proxy를 통해 CORS를 우회할 수 있기 때문에, Vite.config.ts가 제대로 작성되어 있는지 확인 → 로컬에서는 api 요청이 제대로 이루어지고 있기 때문에 Proxy 설정문제는 아닌 것으로 판단했습니다.

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [...],
  resolve: {
    alias: [...],
  },
  server: {
    proxy: {
      '/api': {
        target: 'https://tweaver.site',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        secure: false,
        ws: true,
      },
    },
  },
});

서버에 Access-Control-Allow-Origin가 제대로 등록되어 있는가?

CORS 에러의 가장 주요 원인은 허용되지 않은 주소에서 서버로 요청을 보냈기 때문이라고 판단했기 때문에

백엔드에게 제대로 배포 사이트의 주소가 등록되어 있는지 확인 요청

배포 사이트를 제대로 Origin에 등록을 해주었음에도 동일하게 에러가 나고 있었기 때문에, 로컬 서버와 배포 서버에서 가는 header를 비교한 결과 api 주소가 잘못되었음을 발견할 수 있었습니다.

문제 해결

proxy는 개발 서버에서만 작동하기 때문에 배포할 때는 기존의 api에 붙여서 보내고 있었던 /api 대신 실제 서버의 주소가 붙어야 합니다. 매번 변수를 수정하는 작업을 피하기 위해 환경 변수 파일을 생성했습니다.

.env.delopment와 .env.production 두 파일을 생성하고 api 요청 링크를 수정했습니다.

// .env 환경변수 파일 생성 전
export const getProfileRequest = () => {
  return instance.get(`/api/member`);
};

// .env.delopment
VITE_SERVER_URL = /api

// .env.production
VITE_SERVER_URL = tweaver.site

// .env 환경변수 파일 생성 후 
export const getProfileRequest = () => {
  return instance.get(import.meta.env.VITE_SERVER_URL + `/member`);
};

ValueWith / ValueWith_FE