Vue3 Vite 与 Nginx 反向代理配置方案

一、前言

在前后端分离架构中，前端访问后端资源（尤其是图片、文件等静态资源）的反向代理配置是一个常见且容易踩坑的问题。最近在开发一个 Vue3 + .NET8 的项目时，我就遇到了开发环境配置正常，但部署到生产环境后图片无法访问的问题。本文将详细记录这个问题的解决过程，并给出开发环境和生产环境的完整代理配置方案。

二、问题场景

• 前端：Vue3 项目，运行在 80 端口
• 后端：.NET8 WebAPI，运行在 5005 端口
• 需求：前端通过 http://domain.com/upload/xxx.jpg 访问后端 http://domain.com:5005/upload/xxx.jpg 的图片资源

开发环境下使用 Vite 的代理配置工作正常，但部署到生产环境后出现 404 错误。

三、开发环境配置（Vite）

在 vite.config.ts 中的配置如下：

export default defineConfig({
  server: {
    proxy: {
      '^/[Uu]pload': {
        target: 'http://localhost:5005',
        changeOrigin: true,
      },
    },
  },
})

这个配置实现了：

1. 匹配所有以 /upload 或 /Upload 开头的请求
2. 转发到后端服务 http://localhost:5005
3. changeOrigin: true 处理跨域问题

四、生产环境配置（Nginx）

4.1 初始错误配置

我最初尝试的 Nginx 配置：

location /upload { 
  proxy_pass http://localhost:5005/upload; 
} 

这个配置会导致路径重复拼接，访问 http://domain.com/upload/xxx.jpg 实际会转发到 http://localhost:5005/upload/upload/xxx.jpg，显然不正确。

4.2 正确配置方案

经过研究和实践，正确的 Nginx 配置应该是：

server {
  listen 80;
  server_name domain.com;

  # 前端静态资源
  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

  # 代理上传文件请求
  location ~* ^/upload {
    proxy_pass http://localhost:5005;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}