如何配置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.图解:


相关推荐
棒棒的唐3 小时前
适合小程序使用的将对象数组转换为参数字符串方法
前端·javascript·小程序
西***63473 小时前
全场景音视频赋能:三大综合管理平台技术与落地实践
服务器
刘一说3 小时前
Vue3响应式原理重构:从Object.defineProperty到Proxy的革命性升级
javascript·vue.js·重构
博客zhu虎康3 小时前
音频视频处理:前端直播流播放 flv
前端
一位搞嵌入式的 genius3 小时前
深入理解 JavaScript 原型与继承:从基础到进阶
开发语言·前端·javascript
gaize12133 小时前
阿里云ECS云服务器怎么样?值得入手吗?最新测评
服务器·阿里云·云计算
天上飞的粉红小猪3 小时前
Socket编程TCP
服务器·网络·tcp/ip
董世昌413 小时前
深度解析var、let、const的区别与最佳使用场景
开发语言·前端·javascript
C_心欲无痕3 小时前
Next.js 平行路由:构建模块化动态布局
开发语言·前端·javascript
warrah3 小时前
前端项目容器化部署问题
前端·docker