vite proxy代理打包后在nginx环境出现404：nginx使用反向代理并配合vite.config.js使用rewrite去除多余请求前缀【已解决】

最新推荐文章于 2025-07-31 17:42:46 发布

浮标交换协议

最新推荐文章于 2025-07-31 17:42:46 发布

阅读量263

点赞数 8

CC 4.0 BY-SA版权

分类专栏：细枝末节文章标签： nginx 前端 javascript vite

本文链接：https://blog.csdn.net/2301_76258762/article/details/149740439

细枝末节专栏收录该内容

2 篇文章

订阅专栏

我这个项目的后端很散装，前端开发的时候必须使用vite的proxy连接到不同的后端上，大概如下

// vite.config.ts  

server: {
    proxy: {
      // 选项写法
      // 正常的端口
      '/api': {
        target: 'http://xxx.xxx.xxx.xxx:8000',
        changeOrigin: true,
        rewrite:(path) => path.replace(/^\/api/, '')
      },
      // // 我写在本地的测试用
      // '/demo':{
      //   target: 'http://127.0.0.1:8000',
      //   changeOrigin:true,
      //   rewrite:(path) => path.replace(/^\/demo/, '')
      // },
      '/conv':{
        target:"http://xxx.xxx.xxx.xxx:8010",
        changeOrigin:true,
        rewrite:(path) => path.replace(/^\/conv/, '')
      }
    }
  },

一开始运行到nginx上的时候出现404，搜了一下大概确定是nginx需要配置反向代理

Vue项目打包后代理配置失灵？一文揭秘解决之道 - 云原生实践

Vue项目打包部署上线时devServer.proxy代理失效如何解决？使用nginx的proxy_pass 代理跨域转发_vue打包后代理请求失效-CSDN博客

我依照这个方案简单配置后还是出现404，和后端进行沟通后，后端表示确实收到了请求但是前面加上了多余的前缀，也就是 /api 或 /conv，而后端的api开头实际上开头并没有这个前缀。

这个前缀的存在还是因为在多个代理后端的情况下，vite代理必须要使用rewrite写法删掉多余的前缀再代理请求，否则会失效无法正常运行。但是根据上面的博客简单配置的nginx并没有这个功能。简单概括一下目前的状态：

前端代码中记录的api：带有前缀，确保能转到不同的后端上
开发环境 - 前端vite代理：识别到前缀，删除前缀，请求正常
打包环境 - 直接nginx代理：识别到前缀，没有删除前缀直接代理，请求异常出现404

所以这样看来，解决方法就是在nginx配置上也设置rewrite，其规则与vite的rewrite一致，这样删除掉前缀后即可正常请求：

server {
    listen 9000 default_server;
    listen [::]:80 default_server;
    server_name _;
    root /home/web/dist;
    
    location / {
    
    }
    
    # 代理部分，需要加上rewrite
    
    location ^/api/{
        rewrite ^/api/(.*) /$1 break;
        proxy_pass http://xxx.xxx.xxx.xxx:8000;
        proxy_set_header Host $host;
    }
    
    location ^/conv/{
        rewrite ^/conv(.*) /$1 break;
        proxy_pass http://xxx.xxx.xxx.xxx:8010;
        proxy set header Host $host;
    }

}