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


相关推荐
打瞌睡的朱尤15 小时前
Vue day10 完整购物网页(登录页,首页,搜索)
前端·javascript·vue.js
CCPC不拿奖不改名15 小时前
虚拟机基础:在VMware WorkStation上安装Linux为容器化部署打基础
linux·运维·服务器·人工智能·milvus·知识库搭建·容器化部署
山峰哥16 小时前
数据库调优实战:索引策略与查询优化案例解析
服务器·数据库·sql·性能优化·编辑器
扶苏100216 小时前
深入理解 Vue 3 的 watchEffect
前端·javascript·vue.js
未来龙皇小蓝18 小时前
RBAC前端架构-05:引入Element-UI及相关逻辑
前端·ui
yanlele19 小时前
AI Coding 时代下, 关于你会写代码这件事儿, 还重要吗?
前端·javascript·ai编程
hzc098765432119 小时前
Linux系统下安装配置 Nginx 超详细图文教程_linux安装nginx
linux·服务器·nginx
打瞌睡的朱尤19 小时前
Vue day9 购物车,项目,vant组件库,vw,路由
前端·javascript·vue.js
jjjxxxhhh12319 小时前
【加密】-AES与对称加密
java·服务器·网络
RisunJan20 小时前
Linux命令-ltrace(用来跟踪进程调用库函数的情况)
linux·运维·服务器