Vue3本地环境Vite与生产环境Nginx反向代理配置的方法汇总
作者:Microi风闲
在前后端分离架构中,前端访问后端资源的反向代理配置是一个常见且容易踩坑的问题,最近在开发一个 Vue3 + .NET8 的项目时,我就遇到了开发环境配置正常,但部署到生产环境后图片无法访问的问题,本文将详细记录这个问题的解决过程,需要的朋友可以参考下
一、前言
在前后端分离架构中,前端访问后端资源(尤其是图片、文件等静态资源)的反向代理配置是一个常见且容易踩坑的问题。最近在开发一个 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, } } } })
这个配置实现了:
- 匹配所有以
/upload
或/Upload
开头的请求 - 转发到后端服务
http://localhost:5005
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 配置解析
location ~* ^/upload
:~*
表示不区分大小写的正则匹配- 匹配所有
/upload
或/Upload
开头的请求
proxy_pass
:- 直接指向后端地址,不加
/upload
后缀 - 这样会保留原始请求路径
- 直接指向后端地址,不加
proxy_set_header
:- 传递必要的请求头信息
- 确保后端能获取到真实的客户端信息
4.4 高级配置选项
- 路径重写
如果后端接口路径与前端的路径不一致,可以使用rewrite
规则:
location ~* ^/upload { rewrite ^/upload/(.*) /api/upload/$1 break; proxy_pass http://localhost:5005; }
- 负载均衡
如果后端有多台服务器:
upstream backend { server 192.168.1.101:5005; server 192.168.1.102:5005; } location ~* ^/upload { proxy_pass http://backend; }
- 静态资源缓存
对图片等静态资源启用缓存:
location ~* ^/upload { proxy_pass http://localhost:5005; proxy_cache my_cache; proxy_cache_valid 200 304 1h; proxy_cache_key "$scheme$request_uri"; }
五、常见问题排查
- 404 Not Found
- 检查后端服务是否真的存在该文件
- 确认
Nginx
的转发路径是否正确 - 查看
Nginx
错误日志:tail -f /var/log/nginx/error.log
- 权限问题
确保Nginx
有权限访问后端服务:
chmod -R 755 /path/to/upload chown -R www-data:www-data /path/to/upload
- 缓存问题
强制刷新浏览器缓存:Ctrl + F5
六、开发环境 vs 生产环境对比
功能 开发环境(Vite) | 生产环境(Nginx) |
---|---|
匹配规则 | ^/[Uu]pload(正则) |
目标地址 | env.VITE_API_URL |
路径修改 | 自动 |
跨域处理 | changeOrigin: true |
性能优化 | 无 |
七、总结
通过本文的配置,我们实现了:
- 开发环境和生产环境一致的代理行为
- 不区分大小写的路径匹配
- 完整的请求头传递
- 灵活的路径重写能力
关键点在于理解 Nginx
的 proxy_pass
行为:
- 当
proxy_pass
包含URI
时,会替换location
匹配的部分 - 当
proxy_pass
不包含URI
时,会保留原始请求路径
希望这篇指南能帮助你顺利解决前后端分离项目中的反向代理问题。
以上就是Vue3本地环境Vite与生产环境Nginx反向代理配置方法汇总的详细内容,更多关于Vue3 Vite与Nginx反向代理配置的资料请关注脚本之家其它相关文章!