react setupProxy.js导致项目无法启动的解决
更新时间:2024年07月11日 15:45:56 作者:苦夏木禾
这篇文章主要介绍了react setupProxy.js导致项目无法启动的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react setupProxy.js导致项目无法启动
如果是因为添加了setupProxy.js导致项目无法启动,检查此文件中的如下内容:
低版本 http-proxy-middleware
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-proxy-middleware
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':''}
}),
)
}版本如果是2以上就算是高版本,尤其是最新的项目
配置setupProxy.js代理,页面报错404问题
遇到了一个问题,就是更换解决跨域问题方式时,配置setupProxy.js代理后,可以正常启动,但是报404访问不到页面。
原因是:
// setupProxy.js
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy('/api/**', { //`api`是需要转发的请求
target: 'http://127.0.0.1:8083', // 这里是接口服务器地址
changeOrigin: true,
})
)
}更改为
// setupProxy.js
const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
createProxyMiddleware('/api/**', { //`api`是需要转发的请求
target: 'http://127.0.0.1:8083', // 这里是接口服务器地址
changeOrigin: true,
})
)
}即可~~~~
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
React Antd Select组件输入搜索时调用接口方式
为优化Select组件中文输入时的接口调用,使用lodash.debounce实现防抖,避免每输入一个字母即触发请求,待用户点击空格完成输入后,再调用接口获取数据,提升性能与用户体验2025-08-08
React Native按钮Touchable系列组件使用教程示例
这篇文章主要为大家介绍了React Native按钮Touchable系列组件使用教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
React自定义hooks同步获取useState的最新状态值方式
这篇文章主要介绍了React自定义hooks同步获取useState的最新状态值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
React组件实例三大属性state props refs使用详解
这篇文章主要为大家介绍了React组件实例三大属性state props refs使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-09-09
使用webpack配置react-hot-loader热加载局部更新
这篇文章主要介绍了使用webpack配置react-hot-loader热加载局部更新,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01
React使用react-sortable-hoc如何实现拖拽效果
这篇文章主要介绍了React使用react-sortable-hoc如何实现拖拽效果问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07


最新评论