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


相关推荐
d***9351 小时前
springboot3.X 无法解析parameter参数问题
android·前端·后端
n***84072 小时前
十七:Spring Boot依赖 (2)-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
ROCKY_8176 小时前
计算机网络考试考点——应用层
服务器·网络·计算机网络
e***74956 小时前
Modbus报文详解
服务器·开发语言·php
likuolei6 小时前
XSL-FO 软件
java·开发语言·前端·数据库
正一品程序员6 小时前
vue项目引入GoogleMap API进行网格区域圈选
前端·javascript·vue.js
j***89467 小时前
spring-boot-starter和spring-boot-starter-web的关联
前端
运维管理7 小时前
anolis openeuler 文件复制上用命令-学习篇
服务器
I***t7167 小时前
自己编译RustDesk,并将自建ID服务器和key信息写入客户端
运维·服务器
star_11127 小时前
Jenkins+nginx部署前端vue项目
前端·vue.js·jenkins