Vue3 本地环境 Vite 与生产环境 Nginx 反向代理配置方法汇总【反向代理篇】

文章目录

• 一、前言
• 二、问题场景
• 三、开发环境配置（Vite）
• 四、生产环境配置（Nginx）
  • 4.1 初始错误配置
  • 4.2 正确配置方案
  • 4.3 配置解析
  • 4.4高级配置选项
• 五、常见问题排查
• 六、开发环境 vs 生产环境对比
• 七、总结

一、前言

在前后端分离架构中，前端访问后端资源（尤其是图片、文件等静态资源）的反向代理配置是一个常见且容易踩坑的问题。最近在开发一个 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 中的配置如下：

exportdefaultdefineConfig({ 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; } } 

4.3 配置解析

1. location ~* ^/upload：
   • ~* 表示不区分大小写的正则匹配
   • 匹配所有 /upload 或 /Upload 开头的请求
2. proxy_pass：
   • 直接指向后端地址，不加 /upload 后缀
   • 这样会保留原始请求路径
3. proxy_set_header：
   • 传递必要的请求头信息
   • 确保后端能获取到真实的客户端信息

4.4高级配置选项

1. 路径重写
   如果后端接口路径与前端的路径不一致，可以使用 rewrite 规则：

location ~* ^/upload { rewrite ^/upload/(.*) /api/upload/$1 break; proxy_pass http://localhost:5005; } 

2. 负载均衡
   如果后端有多台服务器：

upstream backend { server 192.168.1.101:5005; server 192.168.1.102:5005; } location ~* ^/upload { proxy_pass http://backend; } 

3. 静态资源缓存
   对图片等静态资源启用缓存：

location ~* ^/upload { proxy_pass http://localhost:5005; proxy_cache my_cache; proxy_cache_valid 200 304 1h; proxy_cache_key "$scheme$request_uri"; } 

五、常见问题排查

1. 404 Not Found

• 检查后端服务是否真的存在该文件
• 确认 Nginx 的转发路径是否正确
• 查看 Nginx 错误日志：tail -f /var/log/nginx/error.log

2. 权限问题
   确保 Nginx 有权限访问后端服务：

chmod -R 755 /path/to/upload chown -R www-data:www-data /path/to/upload 

3. 缓存问题
   强制刷新浏览器缓存：Ctrl + F5

六、开发环境 vs 生产环境对比

七、总结

通过本文的配置，我们实现了：

1. 开发环境和生产环境一致的代理行为
2. 不区分大小写的路径匹配
3. 完整的请求头传递
4. 灵活的路径重写能力

关键点在于理解 Nginx 的 proxy_pass 行为：

• 当 proxy_pass 包含 URI 时，会替换 location 匹配的部分
• 当 proxy_pass 不包含 URI 时，会保留原始请求路径

希望这篇指南能帮助你顺利解决前后端分离项目中的反向代理问题。如果仍有疑问，欢迎在评论区留言讨论！