Vue项目中Vite代理配置无效，请求返回404的问题求助

你的代理配置缺少路径重写规则，导致请求被转发到了错误的地址。

当前配置下，请求/api会被代理到https://jsonplaceholder.typicode.com/api，但该目标地址本身并没有/api这个路径，所以返回404。

修正后的Vite配置 #

需要添加rewrite选项，把请求路径中的/api前缀去掉，这样就能正确转发到目标站点的根路径：

server: {
  port: 8000,
  proxy:{
    '/api':{
      target:'https://jsonplaceholder.typicode.com',
      changeOrigin:true,
      rewrite: (path) => path.replace(/^\/api/, '') // 重写路径，去掉/api前缀
    }
  }
},

验证请求 #

修改配置后重启Vite服务，你的fetch('/api')请求会被代理到https://jsonplaceholder.typicode.com/，就能正常获取数据了。如果要请求具体接口（比如帖子列表），可以写fetch('/api/posts')，会被转发到https://jsonplaceholder.typicode.com/posts。

内容的提问来源于stack exchange，提问作者tg22a