React配置代理(proxy)

使用axios进行请求,而配置代理过程。
 

第一种

在package.json中,添加proxy配置项,之后所有的请求都会指向该地址
但这种方法只能配置一次,也只有一个
示例:

"proxy":"https://localhost:5000"

添加后,重启项目!!!让配置文件加载生效
然后就可以进行请求了
比如请求地址是 http://localhost:5000/api/index/index
那就可以写

axios.get("/api/index/index").then(response => {console.log('成功了',response.data);},error => {console.log('失败了',error);}
)

第二种

src中,新建setupProxy.js(必须是这个名字,react脚手架会识别),在文件中写以下配置内容(最近的项目要使用高版本这个,不然会导致项目无法启动):
http-proxy-middleware高版本(2以上):
 

const proxy = require('http-proxy-middleware')//引入http-proxy-middleware,react脚手架已经安装module.exports = function(app){app.use(proxy.createProxyMiddleware('/api',{ //遇见/api1前缀的请求,就会触发该代理配置target:'http://localhost:5000', //请求转发给谁changeOrigin:true,//控制服务器收到的请求头中Host的值pathRewrite:{'^/api':''} //重写请求路径,下面有示例解释}),proxy.createProxyMiddleware('/api2',{target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2':''}}),)
}

http-proxy-middleware低版本(2以下):
 

const proxy = require('http-proxy-middleware')//引入http-proxy-middleware,react脚手架已经安装module.exports = function(app){app.use(proxy('/api',{ //遇见/api1前缀的请求,就会触发该代理配置target:'http://localhost:5000', //请求转发给谁changeOrigin:true,//控制服务器收到的请求头中Host的值pathRewrite:{'^/api':''} //重写请求路径,下面有示例解释}),proxy('/api2',{target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2':''}}),)
}

写好以后,重启项目!!!
然后进行请求

假设地址是 http://localhost:5000/api/index/index

//没有开启重新路径
axios.get("/api/index/index").then(response => {console.log('成功了',response.data);},error => {console.log('失败了',error);}
)
//开启重写路径
axios.get("/api/api/index/index").then(response => {console.log('成功了',response.data);},error => {console.log('失败了',error);}
)

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

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

相关文章

【ARM】Day6 cotex-A7核UART总线实验

cotex-A7核UART总线实验 1. 键盘输入一个字符‘a’,串口工具显示‘b’ 2. 键盘输入一个字符串"nihao",串口工具显示“nihao” uart.h #ifndef __UART4_H__ #define __UART4_H__#include "stm32mp1xx_rcc.h" #include "stm3…

React源码解析18(9)------ 实现多节点渲染【修改beginWork和completeWork】

摘要 目前&#xff0c;我们已经实现了单节点的&#xff0c;beginWork&#xff0c;completeWork&#xff0c;diff流程。但是对于多节点的情况&#xff0c;比如: <div><span></span><span></span> </div>这种情况&#xff0c;我们还没有处…

el-table实现纯前端查询列表(不走后端接口)

2023.8.16今天我学习了如何使用前端进行数据的查询&#xff0c;有时候后端会直接返回全部的数据&#xff0c;这时候我们就需要用前端进行查找数据。 首先elementUI有自带el-table查询的组件&#xff1a; Element - The worlds most popular Vue UI framework 我们发现在这段代…

Linux网络编程:网络基础

文章目录&#xff1a; 一&#xff1a;协议 二&#xff1a;网络应用设计模式_BS模式和CS模式 三&#xff1a;网络分层模型&#xff08;OSI七层 TCP/IP四层&#xff09; 四&#xff1a;通信过程 五&#xff1a;协议格式 1.数据包封装 2.以太网帧格式和ARP数据报格式 …

【Linux】Centos安装 mariadb 并授权远程登陆

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

【云原生】Docker基本原理及镜像管理

目录 一、Docker概述 1.1 IT架构的演进&#xff1a; 1.2 Docker初始 1.3 容器的特点 1.4 Docker容器与虚拟机的区别 1.5 容器在内核中支持2种重要技术 1.6 Docker核心概念 1&#xff09;镜像 2&#xff09;容器 3&#xff09;仓库 二、安装Docker 2.1 Yum安装Docker…

三.net core 自动化发布到docker (创建一个dotnet工程发布)

创建Jenkins-create a job 输入名称&#xff08;建议不要带“”这类的字符&#xff09;&#xff0c;选择自由风格的类型&#xff08;红框标注的&#xff09;&#xff0c;点击确定 用于测试,下面选项基本没有选择-配置代码地址 选择执行shell #!/bin/bash # 获取短版本号 GITHA…

NLPR、SenseTime 和 NTU 加速自动视频纵向编辑

视频人像编辑技术已经在电视、视频和电影制作中得到了应用&#xff0c;并有望在不断发展的网真场景中发挥关键作用。最先进的方法已经可以逼真地将同源音频合成为视频。现在&#xff0c;来自北京模式识别国家实验室&#xff08;NLPR&#xff09;、商汤科技研究和南洋理工大学的…

OpenAI Function calling

开篇 原文出处 最近 OpenAI 在 6 月 13 号发布了新 feature&#xff0c;主要针对模型进行了优化&#xff0c;提供了 function calling 的功能&#xff0c;该 feature 对于很多集成 OpenAI 的应用来说绝对是一个“神器”。 Prompt 的演进 如果初看 OpenAI 官网对function ca…

CloudQuery实战 | 谁说没有一款一体化数据库操作管控云平台了?

文章目录 CloudQuery询盾的地址CloudQuery主页统一入口数据库归纳SQL编辑器权限管控审计中心数据保护数据变更 CloudQuery文档中心了解CloudQuery快速入门安装步骤社区版v2.1.0操作手册1数据查询更新日志 CloudQuery社区和活动 CloudQuery线上实战线上实战主页面展示及数据操作…

广义模态控制

广义模态控制 1. 模态及模态控制的思想2. 控制方法数学推导3. 解的几个条件4. 举例计算 温馨提示&#xff1a;在阅读本文之前&#xff0c;读者最好具有一定的模态的相关知识&#xff0c;可以阅读笔者的另一篇博客模态反馈控制中的第1节来了解。 1. 模态及模态控制的思想 我们…

宝塔部署Java+Vue前后端分离项目经验总结

前言 之前部署服务器都是在Linux环境下自己一点一点安装软件&#xff0c;听说用宝塔傻瓜式部署更快&#xff0c;这次浅浅尝试了一把。 确实简单&#xff01; 1、 买服务器 咋买服务器略&#xff0c;记得服务器装系统就装 Cent OS 7系列即可&#xff0c;我装的7.6。 2、创建…

Linux面试笔试题(1)

1、以长格式列目录时&#xff0c;若文件test的权限描述为&#xff1a;drwxrw-r–&#xff0c;则文件test的类型及文件主的权限是__A____。 A.目录文件、读写执行 B.目录文件、读写 C.普通文件、读写 D.普通文件、读 在这个问题中&#xff0c;我们需要解析文件权限的描述&…

ChatGPT在智能城市规划和交通优化中的应用如何?

智能城市规划和交通优化是应对城市化挑战、提高城市可持续性的重要领域。在这方面&#xff0c;ChatGPT作为一种强大的自然语言处理模型&#xff0c;可以发挥重要作用&#xff0c;帮助实现更智能、高效的城市规划和交通管理。本文将详细探讨ChatGPT在智能城市规划和交通优化中的…

Python typing函式庫和torch.types

Python typing函式庫和torch.types 前言typingSequence vs IterableCallableUnionOptionalFunctionsCallableIterator/generator位置參數 &#xff06; 關鍵字參數 Classesself自定義類別ClassVar\_\_setattr\_\_ 與 \__getattr\_\_ torch.typesbuiltins 參數前的&#xff0a; …

[RDMA] 高性能异步的消息传递和RPC :Accelio

1. Introduce Accelio是一个高性能异步的可靠消息传递和RPC库&#xff0c;能优化硬件加速。 RDMA和TCP / IP传输被实现&#xff0c;并且其他的传输也能被实现&#xff0c;如共享存储器可以利用这个高效和方便的API的优点。Accelio 是 Mellanox 公司的RDMA中间件&#xff0c;用…

Visual Studio 2022 你必须知道的实用调试技巧

目录 1、什么是bug&#xff1f; 2.调试是什么&#xff1f;有多重要&#xff1f; 2.1我们是如何写代码的&#xff1f; 2.2又是如何排查出现的问题的呢&#xff1f; ​编辑 2.3 调试是什么&#xff1f; 2.4调试的基本步骤 2.5Debug和Release的介绍 3.Windows环境调试介绍…

基于Java+SpringBoot的房源出租信息管理系统【源码+论文+演示视频+包运行成功】

博主介绍&#xff1a;✌csdn特邀作者、博客专家、java领域优质创作者、博客之星&#xff0c;擅长Java、微信小程序、Python、Android等技术&#xff0c;专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推…

【腾讯云Cloud Studio实战训练营】用Vue+Vite快速构建完成交互式3D小故事

&#x1f440;前置了解&#xff1a;(官网 https://cloudstudio.net/) 什么是Cloud Studio&#xff1f; Cloud Studio 是基于浏览器的集成式开发环境&#xff08;IDE&#xff09;&#xff0c;为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装&#…

FPGA_学习_16_IP核_ROM(延迟一拍输出)

在寻找APD最合适的偏压的过程中&#xff0c;一般会用到厂商提供一条曲线&#xff0c;横坐标是温度的变化&#xff0c;纵坐标表示击穿偏压的变化&#xff0c;但每个产品真正的击穿偏压是有差异的。 为了能够快速的找到当前温度下真实的击穿偏压&#xff0c;我们可以这样做&#…