react脚手架配置代理的实现
更新时间：2023年02月24日 09:26:50 作者：SoWhat~
本文主要介绍了react脚手架配置代理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
方法一
在package.json 中追加如下配置
"proxy":"http://localhost:5000"
说明：
优点： 配置简单，前端请求资源时可以不加任何前缀。
缺点：不能配置多个代理
工作方式： 当请求了 3000 不存在的资源时，那么该请求会转发给5000（优先匹配前端资源）
方法二
创建代理配置文件，文件名为 setupProxy.js 名字不能改
在src下创建配置文件： src/setupProxy.js
编写setupProxy.js 配置具体代理规则：
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy('/api1',{ // api1 是需要转发的请求（所有带有 /api1 前缀的请求都会转发给 5000）
target: 'http://localhost:5000', // 配置转发目标地址（返回数据的服务器地址）
changeOrigin: true, // 控制服务器接收到的请求头中 host字段的值
/**
changeOrigin为 true时，服务器收到的请求头中的host为： localhost:5000;
changeOrigin 为 false 时，服务器收到的请求头中的 host 为; localhost:3000;
changeOrigin默认为false,但是一般将 changeOrigin 值设置为 true
*/
pathRewrite:{
'^/api1':'' // 去除请求前缀，保证交给后台服务器的是正常的请求地址（必须配置）
}
}),
proxy('/api2',{
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite:{
'^/api2':''
}
})
）
}说明：
优点：可以配置多个代理，可以灵活的控制请求是否走代理，
缺点： 配置繁琐，前端请求资源时必须加前缀
到此这篇关于react脚手架配置代理的实现的文章就介绍到这了,更多相关react脚手架配置代理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧2022-10-10
在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在这些，故引入hooks（版本：>=16.8），使开发者在非class的情况下使用更多react特性2022-11-11
这篇文章主要给大家介绍了关于React.Js添加与删除onScroll事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
这篇文章主要介绍了使用React手写一个对话框或模态框的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
map()方法是在React中常用的数组处理方法之一,可以用于遍历数组、生成组件列表以及进行数据转换等操作,通过合理运用map()方法,可以更灵活地处理和展示数据,下面给大家讲解react map使用方法,感兴趣的朋友一起看看吧2023-10-10
在本文中,我们将了解如何使用Jest（Facebook 维护的一个测试框架）来测试我们的React组件,我们将首先了解如何在纯 JavaScript 函数上使用 Jest,然后再了解它提供的一些开箱即用的功能,这些功能专门用于使测试 React 应用程序变得更容易,需要的朋友可以参考下2023-10-10
这篇文章主要给大家介绍了在ES6下React组件的写法，其中包括定义React组件、声明prop类型与默认prop、设置初始state、自动绑定，文中分别给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
react进阶教程之异常处理机制error Boundaries
在react中一旦出错,如果每个组件去处理出错情况则比较麻烦,下面这篇文章主要给大家介绍了关于react进阶教程之异常处理机制error Boundaries的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了React 代码共享最佳实践方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-05-05
在React中，路由是一套映射规则，是URL路径与组件的对应关系。使用React路由，就是配置路径和组件的对应关系，这篇文章主要介绍了路由react-router-dom的使用,需要的朋友可以参考下2023-02-02
最新评论