生产环境（Nginx 反向代理）

在 Vue 项目中配置 MaxCMS 接口跨域，并使用 /api/proxy 作为前端路由前缀，需要区分开发环境（Webpack/Vite 代理）和生产环境（Nginx 反向代理）。

以下是完整的配置方案：

一、 开发环境配置（Local Development）

根据你 Vue 项目的构建工具（Vue CLI 或 Vite）选择对应文件进行配置。

1. 如果是 Vue CLI 项目 (Vue 2 / Vue 3 旧版)

修改根目录下的 vue.config.js： [1, 2]

javascript

module.exports = {
  devServer: {
    proxy: {
      // 匹配所有以 /api/proxy 开头的请求
      '/api/proxy': {
        target: 'http://你的MaxCMS域名或IP', // 例如: http://maxcms.com
        changeOrigin: true,                // 允许跨域
        pathRewrite: {
          '^/api/proxy': ''                // 移除请求路径中的前缀，直接转发给 MaxCMS 接口
        }
      }
    }
  }
}

请谨慎使用此类代码。

2. 如果是 Vite 项目 (Vue 3 新版)

修改根目录下的 vite.config.js： [1]

javascript

// ... 省略插件引入
export default defineConfig({
  // ... 其他配置
  server: {
    proxy: {
      '/api/proxy': {
        target: 'http://你的MaxCMS域名或IP', 
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api\/proxy/, '') // 移除前缀
      }
    }
  }
})

请谨慎使用此类代码。

二、 前端 Axios 请求封装

在配置好代理后，前端代码中的 baseURL 必须设置为 /api/proxy。

javascript

import axios from 'axios'

const request = axios.create({
  // 开发环境下，Axios 请求 /api/proxy/api.php，被代理转发至 http://你的MaxCMS域名或IP/api.php
  baseURL: '/api/proxy', 
  timeout: 5000
})

// 示例：获取 MaxCMS 视频列表
export const getVideoList = () => request.get('/api.php/provide/vod')

请谨慎使用此类代码。

三、 生产环境配置（Nginx 部署）

生产环境需在 Nginx 中设置反向代理，解决跨域问题。 [1]

nginx

server {
    listen 80;
    server_name 你的前端域名;

    # 代理 /api/proxy/ 到 MaxCMS
    location /api/proxy/ {
        proxy_pass http://你的MaxCMS域名或IP/; # 注意尾部 / 用于去掉匹配前缀
        proxy_set_header Host $host;
        # ... 其他 proxy_set_header 配置
    }
}

请谨慎使用此类代码。

为了让配置更准确，建议提供以下信息：

• 你的 Vue 项目是用 Vite 还是 Vue CLI (Webpack) 创建的？

• 打包上线后是准备部署在 Nginx 上，还是使用其他方式（如 Node/宝塔面板）？