Vite proxy 配置

简单记录一下通过设置 vite proxy 解决前端开发过程中请求跨域问题

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})

开发过程中前端请求的地址为 /api/interface,经过代理后,请求地址会变为 http://localhost:3000/interface

注意

  • target 为后端接口地址
  • changeOrigin 为 true 时,代理请求头中的 host 会被设置为 target 的 host
  • rewrite 为一个函数,用于重写请求路径
  • 该配置只会在开发环境中生效,生产环境中需要后端解决跨域问题