Vue开发代理服务器配置异常：API请求未转发至Node.js服务器

你的请求未被代理转发到3080端口，通常是以下原因导致的，按顺序排查：

1. 未重启Vue开发服务器 #

修改vue.config.js后，必须重启本地开发服务才能让新的代理配置生效。直接刷新页面不会加载新配置，这是最容易忽略的点。

2. Axios请求使用了绝对路径 #

如果你的Axios请求硬编码了UI的域名和端口（比如http://127.0.0.1:5173/api/login），会直接绕过代理规则。必须使用相对路径发起请求：

// 正确写法：相对路径，触发代理
axios.post('/api/login', loginData)

// 错误写法：绝对路径，跳过代理
axios.post('http://127.0.0.1:5173/api/login', loginData)

如果创建了Axios实例，确保baseURL设置为相对路径：

import axios from 'axios'
const apiClient = axios.create({
  baseURL: '/api' // 或留空，默认使用当前域名
})

3. 验证代理配置是否生效 #

可以给代理配置添加日志输出，确认是否触发了转发：
修改vue.config.js：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ],
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:3080',
        changeOrigin: true,
        logLevel: 'debug' // 添加日志级别
      }
    }
  }
})

重启服务后发起请求，查看控制台日志。如果看到类似[HPM] Proxy created: /api -> http://localhost:3080和[HPM] Rewriting path from "/api/login" to "/api/login"的日志，说明代理已生效，问题可能出在后端服务；如果没有相关日志，说明代理规则未匹配，检查请求路径是否符合^/api的正则（比如是否是/Api/login这种大小写不一致的情况）。

内容的提问来源于stack exchange，提问作者Nick Heiting