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 中的配置如下:

typescript 复制代码
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 配置:

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 配置应该是:

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 规则:
nginx 复制代码
location ~* ^/upload {
    rewrite ^/upload/(.*) /api/upload/$1 break;
    proxy_pass http://localhost:5005;
}
  1. 负载均衡
    如果后端有多台服务器:
nginx 复制代码
upstream backend {
    server 192.168.1.101:5005;
    server 192.168.1.102:5005;
}

location ~* ^/upload {
    proxy_pass http://backend;
}
  1. 静态资源缓存
    对图片等静态资源启用缓存:
nginx 复制代码
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
  1. 权限问题
    确保 Nginx 有权限访问后端服务:
bash 复制代码
chmod -R 755 /path/to/upload
chown -R www-data:www-data /path/to/upload
  1. 缓存问题
    强制刷新浏览器缓存:Ctrl + F5

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

功能 开发环境(Vite) 生产环境(Nginx)
匹配规则 ^/[Uu]pload(正则)
目标地址 env.VITE_API_URL
路径修改 自动
跨域处理 changeOrigin: true
性能优化

七、总结

通过本文的配置,我们实现了:

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

关键点在于理解 Nginxproxy_pass 行为:

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

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

相关推荐
奥尔特星云大使3 小时前
ALTER 与 UPDATE、DROP 与 DELETE区别
linux·运维·数据库·mysql
2025年一定要上岸4 小时前
【日常学习】UI自动化自定义异常类
运维·ui·自动化
teacher伟大光荣且正确5 小时前
Linux 下编译openssl
linux·运维·服务器
dlz08366 小时前
--group-start/--group-end 能不能解决 OpenSSL 1.0 vs 1.1 的优先级问题?
linux·运维·服务器·软件需求
龙茶清欢6 小时前
5、urbane-commerce 微服务统一依赖版本管理规范
java·运维·微服务
tryCbest7 小时前
Linux系统下安装使用Redis
linux·运维·redis
AuroBreeze8 小时前
xv6-2023 - primes Lab
linux·运维·服务器
wdfk_prog9 小时前
[Linux]学习笔记系列 -- lib/sort.c 通用的排序库(Generic Sorting Library) 为内核提供标准的、高效的排序功能
linux·运维·c语言·笔记·stm32·学习·bug
jump_jump10 小时前
前端部署工具 PinMe
运维·前端·开源
それども11 小时前
本地怎么远程调试服务器
运维·服务器