[리액트] Vite_proxy 설정하기_🐾 / 리액트 + Vite + TypeScript, axios, CORS 에러

 

[React+Vite_proxy]

 

React + Vite 에서 proxy 설정하는 방법에 대해 알아보자

 

---

 

<STUDY>

 

🐾 proxy 설정

// vite.config.ts

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

export default defineConfig({
  plugins: [react()],
  server: {  // 추가하기
    proxy: {
      '/api': {
        target: 'url',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

 

   - vite.config.ts 파일에 server 부분을 추가해 주면 된다

 

 

🐾 axios

axios.get(`/api/uri`, {
  //
})

axios.post(`/api/uri`, {
  //
})

axios.put(`/api/uri`, {
  //
})

axios.delete(`/api/uri`, {
  //
})

 

   - axios를 사용하는 경우 uri 앞에 '/api'를 붙여준다

 

---

 

React + Vite 으로 통신 테스트를 하는 도중 axios에서 자꾸 이상하게 CORS 에러가 떴다.

 

분명 리액트 package.json에서 proxy 설정을 해 주었는데도 CORS 에러가 떠서 이것 저것 고생을 많이 했다.

 

그런데 원인은 Vite 에서의 proxy 설정이 rca로 만든 프로젝트에서 설정하는 방법과 달랐던 것..

 

역시 새로운 기술을 도입하면 모르는 게 너무 많고 공부할 것도 많다.

 

앞으로는 좀 더 잘 알아보고 사용해야겠다.

 

 

<자세한 내용은 Vite 공식문서에서 확인할 수 있습니다.>

 

Vite

 

---

 

내가 보려고 정리하는 리액트🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview