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


相关推荐
kyriewen111 天前
Sass:让 CSS 从手工作坊迈入工业时代
前端·javascript·css·html·css3·sass·html5
冰暮流星1 天前
javascript之变量作用域
开发语言·前端·javascript
lxh01131 天前
嵌套数组生成器题解
开发语言·javascript·ecmascript
远方的小草1 天前
检索增强生成技术RAG
前端
Dxy12393102161 天前
DrissionPage使用js点击:突破常规交互限制的“隐形手”
开发语言·javascript·交互
2501_946490381 天前
城市地标光影呈现技术实践——Hirender集群与多边形融合带在《生命之树》的实操解析
服务器·xr·媒体·hirender·hecoos
haorooms1 天前
WebTransport 核心用法及身份验证和应用
前端
用户98236107902771 天前
Node.js 使用 adm-zip 操作 ZIP 文件指南
前端
yannick_liu1 天前
VUE2 + ElementUI 将Table数据导出为Excel文件——vue-json-excel
前端
哇哇哇哇1 天前
Vue3项目性能优化
前端