axios和vite在本地开发环境配置代理的两种方式,五分钟学会

news2024/11/16 13:23:56

如果你使用vue或者react开发,就得使用axios吧,然后为了解决跨域问题,就得使用vite配置吧,那怎么协调配置它们两个才能正常工作呢?

正常的流程:配置axios的baseURL,然后配置vite的proxy

第一种方式:路径不用重写

配置axios的baseURL:

//1、利用axios对象的方法create,去创建一个axios实例
const requests = axios.create({
    //配置对象
    //基础路径,requests发出的请求在端口号后面会跟改baseURl
    baseURL: `${window.location.origin}`,
    //代表请求超时的时间5s
    timeout: 5000,
})

然后再配置vite的proxy:在vite.config.js中配置

    server: {
        host: '0.0.0.0',
        proxy: {
            '/team': {
                target: 'http://dev*******.com:8087',
                ws: false,
                changeOrigin: true,
            },
            '/game': {
              target: 'http://dev*********com:8087',
              ws: false,
              changeOrigin: true,
          },
        },
    },

如果你想将路径重写也是可以的,加上: 

 rewrite: (path) => path.replace(/^\/api/, ''),

第二种方式:路径重写

需要配置axios的baseURL为:

然后将hado的路径重写:

以上两种方式都是可以的:

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

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

相关文章

【论文阅读】Directional Connectivity-based Segmentation of Medical Images

目录 摘要介绍方法效果结论 论文:Directional Connectivity-based Segmentation of Medical Images 代码:https://github.com/zyun-y/dconnnet 摘要 出发点:生物标志分割中的解剖学一致性对许多医学图像分析任务至关重要。 之前工作的问题&…

Linux 实训4 正则表达式

将实训4 :正则表达式的完成情况提交实验报告。 创建并输入文本文件 a bcd 1 233 abc123 defrt456 123abc 12568teids abcfrt568 "Open Source" is a good mechan1sm to develop programs. apple is my favorite food. Football game is not …

数据结构----结构--非线性结构--树

数据结构----结构–非线性结构–树 一.树(Tree) 1.树的结构 树是一对多的结构 2.关于树的知识点 1.根节点:树最上面的节点 2.中间节点:树中间的节点 3.叶子节点:树最下面的节点 如下图 4.边:在树中…

弱信号的采样与频谱分析(修订中...)

1.频谱混叠效应 - 波形数据抽样 这是一组经过抽样的数据的频谱,红圈圈出的两条谱线,是我们需要关注的特征谱线。这个信号与右侧的临近信号比较,求频率比值,比值恒定与理论推导相符。再5取1降低采样率后,大致相同的频率…

虹科案例 | 虹科MSR实现易碎艺术品安全运输——开发有效减少冲击和振动的新工艺

【案例】在CTI研究项目中使用带有加速度传感器的虹科MSR165数据记录仪对冲击振动进行风险评估 项目背景: 全球艺术品运输量持续增长。在运输过程中,画作面临着诸多压力和风险,如冲击和振动。在博物馆搬运这些画作、装卸包装箱、卡车在颠簸的…

Android 视频通话分析总结

1、WireShark 解析视频流 1.1 安装插件 下载rtp_h264_extractor.lua文件,放入Wireshark安装目录 下载地址:https://download.csdn.net/download/tjpuzm/88381821 在init.lua中添加如下代码 dofile(DATA_DIR.."rtp_h264_extractor.lua") 重新…

淘宝的数据使用和数字化进阶过程

宝在数字化转型的过程中,数据使用和数字化进阶均经历了几个不同的发展阶段,这些经历对致力于数字化转型的企业有更多借鉴意义。 1 淘宝数据API使用的5个阶段 淘宝的数据使用经历了5个阶段,如图所示,以下分别进行介绍。 1.依靠数…

苹果手机数据恢复软件哪款好用?看到就是赚到!

手机中储存的数据包含了许多重要的照片、视频、文件等,更重要的是这些数据中所承载着的珍贵记忆。但在我们使用手机的过程中,难以避免一些意外,手机中的数据可能会因为误删除、手机故障、手机恢复出厂设置等原因丢失。 这时候,如…

[chrome devtools]Console面板

点解开发者工具控制台【Console】后,在最右侧找到点击出现如下面板: 【1】是否在控制台显示网络相关的日志信息,比如get请求 【2】刷新或者跳转页面时,原先控制台已显示的日志是否继续保留在控制台上,就是刷新页面控…

批处理数值计算实战,以及打印乘法表

文章目录 计算2的N次方转二进制最大公约数和最小公倍数打印乘法表 计算2的N次方 二进制转换是经常遇到的一个需求,批处理可以非常便捷地完成这个工作。而二进制转化过程中,第一步就是和 2 n 2^n 2n比较大小,所以在实现这个功能之前&#xff…

基于微信小程序的自驾游拼团小程序的设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能:具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

15. RocketMQ 消息队列

Spring Cloud 微服务系列文章,点击上方合集↑ 1. 简介 RocketMQ是一款开源的分布式消息中间件,它具有高可靠性、高性能和可伸缩性,被广泛用于构建分布式系统中的可靠消息传递服务。 官网地址: https://rocketmq.apache.org/ 2…

使用超声波清洗机洗眼镜有哪些注意事项、高颜值超声波清洗机推荐

眼镜,对于许多人来说,不仅仅是矫正视力的工具,更是日常生活的重要伴侣。但是,眼镜的清洁问题却常常让人感到困扰。镜片上的污渍、指纹、甚至小划痕,都让眼镜的使用体验大打折扣。幸运的是,随着科技的进步&a…

优化Python开发环境的几个神技巧

用Python编代码体验极佳,并且随着新版本的发布越来越好! 对于很多人而言,Python提供的大量免费函数库、高可读性的程序和新引入的类型注释让很多爱不释手。 然而,数据科学家特别容易使自己的Jupyter notebook变得庞大而杂乱&…

生物制药公司Acesis Holdings申请650万美元纳斯达克IPO上市

来源:猛兽财经 作者:猛兽财经 猛兽财经获悉,生物制药公司Acesis Holdings近期已向美国证券交易委员会(SEC)提交招股书,申请在纳斯达克IPO上市,股票代码为(ACSB),Acesis …

【AI视野·今日NLP 自然语言处理论文速览 第四十期】Mon, 25 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Mon, 25 Sep 2023 Totally 46 papers 👉上期速览✈更多精彩请移步主页 Daily Computation and Language Papers ReConcile: Round-Table Conference Improves Reasoning via Consensus among Diverse LLMs Authors Justin C…

【算法训练-动态规划】二 买卖股票的最佳时机

废话不多说,喊一句号子鼓励自己:程序员永不失业,程序员走向架构!本篇Blog的主题是【动态规划】,使用【数组】这个基本的数据结构来实现,这个高频题的站点是:CodeTop,筛选条件为&…

阿里云网络、数据中心和服务器技术创新优势说明

阿里云服务器技术创新、网络技术创新、数据中心技术创新和智能运维:云服务器方升架构、自研硬件、自研存储硬件AliFlash和异构计算加速平台,以及全自研网络系统技术创新和数据中心巴拿马电源、液冷技术等技术创新说明,阿里云百科aliyunbaike.…

React Native从0到1开发一款App

先贴上项目地址,有需要的大佬可以去github看看: WinWang/RNOpenEye: React Native(0.72)版本开眼OpenEye项目 (github.com) React Native(0.72)版本OpenEye项目,主要用来熟悉并上手RN项目的开发,是Flutte…

使用 Python 的自主机器人算法 Dijkstra 路径规划

迪杰斯特拉算法 Dijkstra 算法是一种广泛使用的算法,用于查找图中的最短路径。它通过从起始节点迭代选择成本最小的节点来探索搜索空间。Dijkstra 算法计算到达每个节点的成本,并在找到更短路径时更新成本。它会持续下去,直到到达目标节点或探…