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中使用video.js的踩坑记录

    react中使用video.js的踩坑记录

    这篇文章主要介绍了react中使用video.js的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • React组件化的一些额外知识点补充

    React组件化的一些额外知识点补充

    React是一个用于构建用户界面的JavaScript库,下面这篇文章主要给大家介绍了关于React组件化的一些额外知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • React类组件中super()和super(props)的区别详解

    React类组件中super()和super(props)的区别详解

    这篇文章给大家详细介绍了React类组件中super()和super(props)有什么区别,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01
  • React Native项目中使用Lottie动画的方法

    React Native项目中使用Lottie动画的方法

    这篇文章主要介绍了React Native 实现Lottie动画的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • react diff算法源码解析

    react diff算法源码解析

    这篇文章主要介绍了react diff算法源码解析的相关资料,帮助大家更好的理解和学习使用react,感兴趣的朋友可以了解下
    2021-04-04
  • react+antd select下拉框实现模糊搜索匹配的示例代码

    react+antd select下拉框实现模糊搜索匹配的示例代码

    我们在开发过程中,经常会出现下拉框数据很多得情况,本文主要介绍了react+antd select下拉框实现模糊搜索匹配的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • react umi 刷新或关闭浏览器时清除localStorage方式

    react umi 刷新或关闭浏览器时清除localStorage方式

    这篇文章主要介绍了react umi 刷新或关闭浏览器时清除localStorage方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 解决antd的Table组件使用rowSelection属性实现多选时遇到的bug

    解决antd的Table组件使用rowSelection属性实现多选时遇到的bug

    这篇文章主要介绍了解决antd的Table组件使用rowSelection属性实现多选时遇到的bug问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • React工作流程及Error Boundaries实现过程讲解

    React工作流程及Error Boundaries实现过程讲解

    这篇文章主要介绍了React工作流程及Error Boundaries实现过程讲解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-02-02
  • React Hook中的useEffecfa函数的使用小结

    React Hook中的useEffecfa函数的使用小结

    React 会在组件更新和卸载的时候执行清除操作, 将上一次的监听取消掉, 只留下当前的监听,这篇文章主要介绍了React Hook useEffecfa函数的使用细节详解,需要的朋友可以参考下
    2022-11-11

最新评论