vue中在vite.config.js 配置正向代理

&ACE&

于 2024-01-28 11:07:58 发布

阅读量1k

点赞数 4

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_59525879/article/details/135893050

版权

本文介绍了如何在vite.config.js中使用proxy选项配置正向代理，以便在开发环境中转发/api开头的请求到http://localhost:3000，实现对后端接口的本地模拟。changeOrigin和rewrite功能在此场景下的应用也得到了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vite.config.js文件中，可以使用proxy选项来配置正向代理。下面是一个简单的示例：

// vite.config.js
module.exports = {
  proxy: {
    // 设置代理目标
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

上面的示例中，我们将所有以/api开头的请求转发到http://localhost:3000。changeOrigin: true表示请求时会将请求头中的host字段设置为目标服务器的地址，rewrite函数用于重写请求路径，将/api前缀去除，这样请求/api/user会被代理到http://localhost:3000/user。

配置正向代理后，开发服务器会将匹配到的请求转发到目标服务器，这样就可以实现在开发环境中访问后端接口。注意，此配置只在开发服务器中生效，上线后不会生效。