Vite 代理下的 POST 请求跨域问题排查与解决方案

📌 问题描述

在 Vite 开发环境中，我遇到了一个奇怪的现象：

• GET 请求可以成功返回数据
• POST 请求却返回 403 Forbidden: Invalid CORS request
• 但如果我手动使用 fetch 直接请求服务器 API，POST 请求可以成功

我的 Vite 代理配置如下：

server: {
  proxy: {
    '/api': {
      target: 'https://www.example.cn',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '/api/back')
    }
  }
}

在 axios 中的 POST 请求：

request.post({ url: '/queryRealTimeData' })

最终 POST 请求失败，并在控制台看到：

403 Forbidden: Invalid CORS request

---

🔍 排查过程

1️⃣ 直接测试服务器 API

为了确认后端 API 是否工作正常，我手动使用 fetch 在本地 HTML 文件中调用 API：

const response = await fetch(
  "https://www.example.cn/api/back/query",
  {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({})
  }
);

请求成功！这说明后端 API 本身没有问题。

---

2️⃣ 检查 Vite 代理的 POST 请求

我打开 Network 面板，查看 Vite 代理的 POST 请求，发现：

• 请求的 Origin 是 http://localhost:4000
• 服务器的 CORS 规则仅允许 http://127.0.0.1:5500
• 浏览器在 POST 之前会先发送 OPTIONS 预检请求，而这个请求被拒绝了

为了确认 OPTIONS 是否真的被拒绝，我手动执行：

curl -X OPTIONS -H "Origin: http://localhost:4000" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: Content-Type" \
  https://www.liontry.cn/api/back/moon/queryRealTimeData -v

返回：

403 Forbidden: Invalid CORS request

确认问题：后端的 CORS 规则不允许 localhost:4000，但允许 127.0.0.1:5500，所以 Vite 代理的请求失败！

---

3️⃣ 解决方案

✅ 方案 1：伪装 Origin

由于后端只允许 127.0.0.1:5500，但 Vite 运行在 localhost:4000，我修改 Vite 代理，在 headers 里手动伪装 Origin：

server: {
  proxy: {
    '/api': {
      target: 'https://www.example.cn',
      changeOrigin: true,
      secure: false,
      headers: {
        Origin: 'http://127.0.0.1:5500' // 伪装成被允许的 Origin
      },
      rewrite: (path) => path.replace(/^\/api/, '/api/back')
    }
  }
}

修改后，POST 请求成功！

---

✅ 方案 2：让后端允许 localhost:4000

如果后端可修改，最好的办法是让后端 CORS 规则允许 localhost:4000：

Access-Control-Allow-Origin: http://127.0.0.1:5500, http://localhost:4000
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

📌 这样，无论是 fetch 还是 Vite 代理的 axios，都能正常请求！

---

🎯 总结

问题	原因	解决方案
GET 请求成功，但 POST 失败	POST 触发 OPTIONS 预检，后端 CORS 限制了 Origin	让后端允许 localhost:4000，或在 Vite 代理中伪装 Origin
fetch 请求成功，Vite 代理的 POST 失败	fetch 直接请求 127.0.0.1:5500，Vite 代理使用 localhost:4000	在 Vite 代理 headers 里伪装 Origin
CORS 报错 Invalid CORS request	后端不允许 localhost:4000 作为 Origin	让后端添加 localhost:4000 到 Access-Control-Allow-Origin

💡 最终，我通过在 Vite 代理中伪装 Origin 解决了 POST 请求的跨域问题！ 🚀