vue3.x 设置代理-马育民老师

# 介绍

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

- Vite 版
- Vue CLI

### 一、Vite 版（推荐，Vue3 默认）
文件：`vite.config.js` / `vite.config.ts`

```js
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 后端不验证证书（开发用）

#### 前端请求
```js
axios.get('/api/user') 
// 实际代理到：http://localhost:8080/user
```

---

### 二、Vue CLI（Webpack）版
文件：`vue.config.js`

```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服务器

原文出处：http://malaoshi.top/show_1GW3DQ539Avz.html