如何配置vite的proxy

1.前言

vite项目,本地开发环境可以通过配置proxy代理实现跨域请求。但是生产环境,该配置不生效,一般使用 nginx 转发,或者后端配置cors

2.解释

javascript 复制代码
server: {
      port: 9000,
      proxy: { // 本地开发环境通过代理实现跨域,生产环境使用 nginx 转发
        // 正则表达式写法
        '^/api': {
          target: 'http://xxxx/xx'// 后端服务实际地址
          changeOrigin: true, //开启代理
// path是请求方法axios配置的baseUr中去除 协议+域名+端口 剩下的部分。例如http://127.0.0.1:9000/api,这里的path就是/api
          rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
        }
      }
    }

注意:最终的请求地址是 target + (rewrite重写的地址

3.图解:


相关推荐
shix .7 分钟前
旅行网站控制台检测
开发语言·前端·javascript
RisunJan11 分钟前
Linux命令-lvextend(扩展逻辑卷空间)
linux·运维·服务器
艾莉丝努力练剑21 分钟前
【Linux:文件】进程间通信
linux·运维·服务器·c语言·网络·c++·人工智能
哆啦A梦158825 分钟前
Vue3魔法手册 作者 张天禹 016_vue3中一些特定用法介绍
前端·vue.js·typescript
The森33 分钟前
Linux IO模型纵深解析:文章索引
linux·运维·服务器
henry1010101 小时前
DeepSeek生成的网页小游戏 - 迷你高尔夫
前端·javascript·游戏·html
伊织萌1 小时前
在 Ubuntu 22.04 上安装 PostgreSQL
linux·服务器·ubuntu·postgresql·云计算
锅包一切1 小时前
一、什么是Linux?
linux·运维·服务器·操作系统
薛一半2 小时前
React的组件
前端·javascript·react.js