Vite proxy-rewrite 属性详解

news2024/11/26 2:40:55

在前端开发中,为了避免跨域问题,我们会在vite.config.ts 中配置如下问题

rewrite: 由于不了解Nginx的知识,这个属性一直困扰着我,这个重写有啥用,加和不加有啥影响

  server: {
     host: '0.0.0.0',
     proxy: {
       '/api': {
           target: 'http://192.168.110.188:3091',   // 
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    },

假设我们有一个方法 axios.get('/api/getList'), 后端服务为 http://192.168.110.188:3091

1、(开发环境) 不加 rewrite:(path)=>path.replace(/^/api/,'')

       发起请求后,后端接受到接口为http://192.168.110.188:3091/api/getList

        所以这个时候,后端要额外加一个前缀 '/api'

2、(开发环境) 加 rewrite:(path)=>path.replace(/^/api/,'')

       发起请求后,后端接受到接口为http://192.168.110.188:3091/getList

        这个时候,后端不需要额外加一个前缀 '/api'

在线上/测试环境的时候一般需要用Nginx转发,如下面测试配置的nginx转发, localhost 对应的ip 为:http://192.168.xx.xx, 那么测试环境的地址则为:http://192.168.xx.xx/9006

Nginx配置后,如测试环境的请求为:

http://192.168.xx.xx/9006/lytk-api/getUser 则会转发到 后端服务/getUser,不带lytk-api的

补充一下:如果接口返回了 html页面,则是测试或者运维Nginx转发错误,前端不背这个锅

                

        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1639595.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

为什么3D模型材质是透明的?---模大狮模型网

在进行3D建模和渲染过程中,正确的材质设置是保证模型外观逼真和渲染效果良好的关键之一。然而,有时您可能会遇到3D模型材质变成透明的情况,这可能会导致意想不到的效果和渲染结果。本文将探讨一些可能导致3D模型材质变成透明的原因&#xff0…

【Java基础】Maven安装与配置

1. 前言 Maven是一个基于 Java 的项目管理工具,因此最基本的要求是在计算机上安装 JDK。 Maven 对系统要求如下表: 2. Java环境设置 在 Java 官方网站 下载并安装 JDK 7.0 及以上版本,如果您不了解 JDK 的安装和配置,请参考&…

《QT实用小工具·五十二》文本或窗口炫酷有趣的滚动条——果冻条

1、概述 源码放在文章末尾 该项目实现了文本或窗口纤细的滚动条——果冻条 一个可以像弓弦一样拉出来,并且来回弹动的普通滚动条。 思路为此,但发现实际效果更像条状果冻,并且略有谐音, 故,称之为——“果冻条”&am…

安装部署大语言模型 | 通义千问

下载安装 进入ollama的仓库下载 「 qwen 7b 」 libraryGet up and running with large language models.https://ollama.com/library查找阿里的 「 qwen 」 根据自己的电脑配置情况,选择合适的模型 总体来说,模型是越大,效果越好&#xff0c…

【热门话题】Stylus 入门与实践详解

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 ​💫个人格言: "如无必要,勿增实体" 文章目录 Stylus 入门与实践详解引言一、Stylus 简介1.1 什么是 Stylus?1.2 S…

LPO vs CPO:谁是数据中心光互连的领跑者?

在不断扩大的数据中心领域,速度和效率至关重要,光互连的主导地位之争已经到了关键时刻。激光相控振荡器(LPO)和相干相控振荡器(CPO)这两项强大的技术已成为彻底改变数据中心光互连竞赛的主要竞争者。本文深…

MVC和DDD的贫血和充血模型对比

文章目录 架构区别MVC三层架构DDD四层架构 贫血模型代码示例 充血模型代码示例 架构区别 MVC三层架构 MVC三层架构是软件工程中的一种设计模式,它将软件系统分为 模型(Model)、视图(View)和控制器(Contro…

用户中心(终)

文章目录 Ant Design Pro(Umi 框架)ProComponents 高级表单待优化点 todo注册逻辑增加注册页面页面重定向问题注册页面 **获取用户的登录态****前端用户管理功能** Ant Design Pro(Umi 框架) app.tsx 项目全局入口文件&#xff0c…

Redis Zset的底层原理

Redis Zset的底层原理 ZSet也就是SortedSet,其中每一个元素都需要指定一个score值和member值: 可以根据score值排序后member必须唯一可以根据member查询分数 因此,zset底层数据结构必须满足键值存储、键必须唯一、可排序这几个需求。之前学…

Node.js -- MongoDB

文章目录 1. 相关介绍2. 核心概念3. 命令行交互3.1数据库命令3.2 集合命令3.3 文档命令 4. 数据库应用场景4.1 新增4.2 删除4.3 更新4.4 查询 5. 图形化工具Robo 3T 1. 相关介绍 一、简介 Mongodb是什么 MongoDB是一个基于分布式文件存储的数据库,官方地址https://…

jupyter notebook使用与本地位置设置

本地安装好Anaconda之后,自带的有Jupter notebook。 使用jupyter notebook 使用jupyter notebook时,可以直接打开或者搜索打开: 打开后,我们生成的或者编辑的一些文件,都可以看到,如下: j…

基于Spring Boot的心灵治愈交流平台设计与实现

基于Spring Boot的心灵治愈交流平台设计与实现 开发语言:Java框架:springbootJDK版本:JDK1.8数据库工具:Navicat11开发软件:eclipse/myeclipse/idea 系统部分展示 系统功能界面图,在系统首页可以查看首页…

14.集合、常见的数据结构

集合 概念 Java中的集合就是一个容器,用来存放Java对象。 集合在存放对象的时候,不同的容器,存放的方法实现是不一样的, Java中将这些不同实现的容器,往上抽取就形成了Java的集合体系。 Java集合中的根接口&#x…

挑战一周完成Vue3项目Day4: 用户管理+角色管理+菜单管理+首页+暗黑模式/主题切换

一、用户管理 1.静态搭建 src/views/acl/user/index.vue <template><el-card style"height:80px;"><el-form :inline"true" class"form"><el-form-item label"用户名&#xff1a;"><el-input placehold…

Golang | Leetcode Golang题解之第64题最小路径和

题目&#xff1a; 题解&#xff1a; func minPathSum(grid [][]int) int {if len(grid) 0 || len(grid[0]) 0 {return 0}rows, columns : len(grid), len(grid[0])dp : make([][]int, rows)for i : 0; i < len(dp); i {dp[i] make([]int, columns)}dp[0][0] grid[0][0]…

vscode 插件 code settings sync(配置云端同步)

vscode 插件 code settings sync&#xff08;配置云端同步&#xff09; 电脑A和B&#xff0c;vscode配置都在A电脑上&#xff0c;此时你想要将A电脑的vscode配置同步到B电脑的vscode中 第一步&#xff1a;A电脑和B电脑都需要在VSCode中安装下图插件 code settings sync 第二步&…

免费开源语音克隆-GPT-SoVITS-WebUI只需 5 秒的声音样本

语音克隆-GPT-SoVITS-WebUI 强大的少样本语音转换与语音合成Web用户界面。 功能&#xff1a; 零样本文本到语音&#xff08;TTS&#xff09;&#xff1a; 输入 5 秒的声音样本&#xff0c;即刻体验文本到语音转换。 少样本 TTS&#xff1a; 仅需 1 分钟的训练数据即可微调模型…

[随记]Mac安装Docker及运行开源Penpot

下载Docker Desktop for Mac&#xff1a;https://www.docker.com/products/docker-desktop/ 安装Docker Desktop for Mac&#xff0c;安装完成后&#xff0c;启动Docker&#xff0c;然后在终端输入&#xff1a; docker version 在Mac电脑的Desktop&#xff0c;随便创建一个文…

国产服务器操作系统部署NTP服务 _ 统信UOS _ 麒麟 _ 中科方德

原文链接&#xff1a;国产服务器操作系统部署NTP服务 | 统信UOS | 麒麟 | 中科方德 Hello&#xff0c;大家好啊&#xff01;在保持服务器时间的精确同步方面&#xff0c;时间同步服务器&#xff08;NTP服务器&#xff09;扮演着至关重要的角色&#xff0c;它能确保系统操作的时…

JAVA面试专题-微服务篇

Spring cloud Spring Cloud 5大组件有哪些 注册中心/配置中心&#xff1a;nacos 负载均衡&#xff1a;Ribbon 服务远程调用&#xff1a;Feign 服务保护&#xff1a;sentinel 服务网关&#xff1a;Gateway 微服务注册和发现 nacos和eureka的区别 负载均衡 微服务向Ribbon发送…