Vue应用API请求携带客户端IP而非前端源IP导致CORS失效如何解决

核心概念纠正 #

你的理解确实存在偏差：Vue应用属于前端单页应用，前端服务器（NAS上的6080服务）仅负责将静态资源下发到用户的浏览器，所有JS逻辑都是在用户本地浏览器中执行的。因此API请求是浏览器直接发送给后端5000端口，请求的源IP自然是客户端设备IP，这是正常现象。
CORS校验的核心不是请求的源IP，而是请求头中的Origin字段，这个字段的值就是你前端页面的访问地址，也就是http://192.168.0.150:6080，和客户端IP没有关联。

配置失效原因排查 #

1. CORS配置错误 #

你配置的allow_origins=["http://192.168.0.150:6080/"]末尾多了一个尾斜杠，FastAPI的CORSMiddleware对Origin的匹配是严格相等规则，浏览器发送的Origin头不会携带尾斜杠，因此匹配失败触发CORS报错。

2. 代理配置不生效 #

你在axios配置里硬编码了axios.defaults.baseURL = 'http://192.168.0.150:5000/'，这会让所有请求直接向5000端口发送，完全不会走前端服务的代理规则，所以之前的代理配置没有生效。

两种可行解决方案 #

方案一：直接修正CORS配置（适合内部场景，改动最小） #

仅需修改后端CORS配置，去掉尾斜杠即可：

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://192.168.0.150:6080"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

其余配置无需改动，即可正常访问。

方案二：使用前端代理（适合生产场景，更规范） #

该方案不会暴露后端端口给客户端，所有请求都通过前端服务转发，后端收到的请求源就是前端服务的IP。

1. 删掉axios配置中的baseURL：

// 移除该行配置
// axios.defaults.baseURL = 'http://192.168.0.150:5000/';

2. 添加前端代理配置：
   如果是Vue3 + Vite环境，在vite.config.js中添加：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.150:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

如果是Vue2 + Vue CLI环境，在vue.config.js中添加：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.150:5000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

3. 修改请求路径，添加/api前缀触发代理规则：

axios.get('/api/')

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