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


相关推荐
@大迁世界42 分钟前
41.ShadCN 是什么?它如何和 Tailwind CSS 集成,从而更容易构建可访问且可自定义的 React 组件?
前端·javascript·css·react.js·前端框架
weixin_514253181 小时前
511-qwen3.5-patch
服务器
千叶风行1 小时前
Text-to-SQL 技术设计与注意事项
前端·人工智能·后端
软件开发技术深度爱好者1 小时前
HTML5+JavaScript读取DOCX 文档完整内容
前端·html5
幽络源小助理2 小时前
苹果CMS V10 MXPro V4.5模版下载, 自适应视频主题源码, 幽络源源码
前端·开源·源码·php源码
kyriewen2 小时前
坏了,黑客学会用AI写外挂了
前端·程序员·ai编程
xiangxiongfly9153 小时前
Vue3 根据角色权限动态加载路由
前端·javascript·vue.js·动态加载路由
达达尼昂3 小时前
Claude 多 Agent 系统:从零搭建一个 4 Agent 团队
前端·架构·ai编程
费曼学习法4 小时前
React 18 并发模式(Concurrent Mode):Fiber 架构的终极进化
javascript·react.js
wanhengidc4 小时前
服务器中带宽的重要性
运维·服务器·网络·安全·web安全