Vue3+Vite开发中代理配置失效，请求仍发至localhost问题排查

核心问题排查 #

• Vite开发服务器未重启：修改vite.config.js后必须重启开发服务器，新的代理配置才会生效，热更新不会自动加载代理规则，这是最常见的疏漏点。
• 请求头配置错误：使用FormData作为请求体时，手动设置contentType: "application/json;charset=UTF-8"完全错误——FormData会自动生成multipart/form-data类型的请求头，手动覆盖会导致后端无法解析请求，同时可能干扰代理转发逻辑。
• 浏览器缓存干扰：浏览器可能缓存了旧的请求路由，尝试用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）硬刷新页面，清除缓存后再测试。

修正后的代码示例 #

1. 代理配置（无需修改，只需重启服务器） #

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    proxy: {
      "/api": {
        target: "https://###.com",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    }
  }
})

2. 修正请求方法的头配置 #

// createPayment方法
createPayment() {
  const url = "/api/webhook/###";
  let formData = new FormData();
  formData.append("firstName", this.first_name);
  formData.append("lastName", this.last_name);
  formData.append("email", this.email);
  formData.append("phone", this.phone);
  formData.append("cardNumber", this.c_number);
  formData.append("cardExpiration", this.c_EXP);
  formData.append("cardCCV", this.c_CVC);
  
  // 移除无效的请求头配置
  const request = new Request(url, {
    method: "POST",
    body: formData,
    headers: {
      accept: 'application/json'
    },
  });

  fetch(request)
    .then(result => console.log(result))
    .catch(error => console.log('error', error));
},

额外说明 #

• AccessControlAllowOrigin是后端返回的响应头，前端设置这个请求头完全无效，无需添加。
• 代理生效后，浏览器Network面板显示的请求地址仍为http://localhost:3000/api/...，但实际请求会被Vite转发到https://###.com/webhook/###（路径重写后），可通过Network面板的Proxied标记确认代理状态。

内容的提问来源于stack exchange，提问作者Pablo Fernandez