참고 내용

참고 블로그
Vite 공식 문서

해결 방법

1. vite.config.js의 파일을 연다
2. 해당 내용을 추가한다.

// /api로 시작하는 요청에 대해서 proxy를 사용한다.
// origin을 http://localhost:8080 로 변경해서 요청
    server: {
        proxy: {
            '/api': 'http://localhost:8080'
        }
    }

3. 그럼 다음과 같이 된다.

export default defineConfig({
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        proxy: {
            '/api': 'http://localhost:8080'
        }
    }
})

4. 서버를 재실행하고 확인해보자.

추가 설명

axios.get("/api/items")
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.log(error);
    });

다음과 같은 코드가 있고, 설정을 위와 같이 해뒀다면

• /api 로 시작하므로, proxy를 적용
• 원래라면 http://localhost:5173/api/items 로 요청을 했겠지만 proxy를 적용했으므로, http://localhost:8080/api/items 으로 요청을 하게 됨
• 같은 URI를 사용하므로 CORS 문제를 해결