介绍

Vue3 代理主要用于开发环境解决跨域，分两种工程：

• Vite 版
• Vue CLI

一、Vite 版（推荐，Vue3 默认）

文件：vite.config.js / vite.config.ts

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

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      // 代理 /api 开头的请求
      '/api': {
        target: 'http://localhost:8080', // 后端地址
        changeOrigin: true, // 必须，修改 Origin
        rewrite: (path) => path.replace(/^\/api/, '') // 去掉 /api 前缀
      },
      // 可加多个代理
      '/ws': {
        target: 'ws://localhost:8080',
        ws: true // 代理 WebSocket
      }
    }
  }
})

常用参数说明

• target：后端真实地址
• changeOrigin: true：解决跨域必需
• rewrite：路径重写（去掉前缀）
• ws: true：支持 WebSocket
• secure: false：HTTPS 后端不验证证书（开发用）

前端请求

axios.get('/api/user') 
// 实际代理到：http://localhost:8080/user

二、Vue CLI（Webpack）版

文件：vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { '^/api': '' } // Webpack 用 pathRewrite 对象
      }
    }
  }
}

注意事项

1. 仅开发环境有效：打包后代理失效，生产环境需用 Nginx 反向代理或 CORS。
2. 重启服务：修改配置后必须重启 npm run dev。
3. 不要硬编码后端地址：统一用 /api，开发靠代理、生产靠 Nginx。

生产环境跨域

使用 Nginx 等专业的 web服务器

原文出处：/show_1GW3DQ539Avz.html