Proxy 그게 몬데 어떡케 하는 건데 (Vite Proxy 설정)

문제 상황

• 강조되고 반복되는 CORS 에러가 주경이를 불안하게 함

CORS (Cross Origin Resource Sharing)
CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘이다. CORS는 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로 CORS라는 이름으로 표준화 되었다. CORS는 최신 브라우저에서 구현된 동일 출처 정책(same-origin policy) 때문에 등장했다.

 

Proxy

CORS를 해결하기 위해서는 서버 측에서 Origin Allow 속성에 클라이언트에서 보내는 출처를 추가하고, 배포하는 곳에서도(AWS 같은 거) 따로 설정해 줘야 한다. 우리 프로젝트에서는 어지간한 설정을 다 했(다고 들었)는데도 불구하고 해결이XxxxxxXXXXxxxXX... 이럴 때 클라이언트 측에서 프록시 서버를 설정하여 해결할 수 있다. 킹치만.. 프록시 서버 우회는 개발 환경에서만 가능하다고 하니까 주의하도록 한다.

Proxy는 API로 네트워크 요청 / 응답을 주고 받는 클라이언트와 서버 사이를 중개하는 중간자 역할이다. Proxy 설정을 한다면 요청을 날릴 때 Origin을 바꿔서 서버에 날릴 수 있다.

 

Vite 환경에서 Proxy 설정 방법

1. vite.config.ts

        server: {
            proxy: {
                "/api": {
                    target: 배포된거주소,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, ""),
                    secure: false,
                    ws: true,
                },
            },
        },

 

2. 공통 axios

const customAxios: AxiosInstance = axios.create({
    withCredentials: true,
    baseURL: "/api",
});

 

대가리만극지말고말을해

데이터 응답이 아주 깔끔하게 들어와서 기쁘긴 했는데 오류 때문에 골머리 썩은 건 며칠이고 해결은 10분...?아니야3분...만에 해버려서 살짝 머쓱한 감정을 느낌

 

reference

https://velog.io/@zerone/Vite-Proxy-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B2%95

Vite Proxy 설정하는 법