react 配置代理 setupProxy.js 无法访问v3.0版本

最新推荐文章于 2024-05-18 21:57:13 发布
最新推荐文章于 2024-05-18 21:57:13 发布
阅读量338 收藏 2
点赞数 12
文章标签： javascript react.js 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61899890/article/details/138138186
版权

网上说是因为版本不对const proxy = require('http-proxy-middleware') 要写成const { createProxyMiddleware } = require("http-proxy-middleware") 但是本人试了很久还是一样页面访问不了 无奈之下直接去官网 官网已经到3.0.0版本了

官网地址：http-proxy-middleware - npm (npmjs.com)

我们先看一下老版本的写法

我们再来看官网的

然后我根据最新的版本设置   把'/api1' 放到createProxyMiddleware外面来

重启项目 成功进入首页 

就这勾八问题搞我半小时 无语死了

WikC.668
关注
  • 12
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
setupProxy.js
06-07
react 前端
webpack构建react项目配置代理 和 react图片懒加载-webpack，React中如何实现样式隔离
qq_64917482的博客
06-28 159
1, 下载安装代理模块2, 在src目录中新建setupProxy.js文件，在文件中放入如下代码(注意是src目录,不是根目录)：})附加:设置项目端口号: node_modules/react-scripts/scripts/start.js也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆)
vue3.0源码解析之数据代理Proxy
qq_22305897的博客
03-05 1176
多年前刚转前端的时候，对频繁的拼接页面元素深恶痛绝，当时是通过封装字符串模版来处理页面的。之后又陆续发现，数据变化后需要频繁的修改dom节点来操作页面，便不得不自己写很多更新的代码，直到出现了vue和react、就转向了框架开发。
react http-proxy-middleware配置代理(前端代码以及用于自测的服务器代码)
qq_26889291的博客
11-02 600
官方文档.
React——路由——概念、环境、创建路由、页面跳转、传参数、配置符 *、子路由、重定向、React解决跨域
qq_52301431的博客
10-18 1539
Link和useNavigate实现组件切换时，实计上伴随着组件的销毁与创建，所以建议只有整体页面切换时才使用路由，而局部切换时使用最原始的隐藏显示为佳，这样可以保让组件中通过ajax得到的数据一直存在。不管是主路由还是子路由，只要组件内嵌在标签"BrowserRouter"中，就可以使用hook-useNavigate或标签Link直接使用正确的路由path访问到；中的"/404"是任意写的一个不存在的路由path,所以不是非要写成"/404"
react下载,包括react.development.js;babel.min.js;react-dom.development.js
11-20
包括react.development.js;babel.min.js;react-dom.development.js三个js文件
React依赖包v16.14.0
02-10
一共包含6个文件: react.development.js react.production.min.js react-dom.development.js react-dom.production.min.js babel.min.js prop-types.js
react-cytoscapejs:Cytoscape.js网络可视化的React组件
05-11
React细胞react-cytoscapejs软件包是MIT许可的组件，用于网络（或图形，如）的可视化。 该组件呈现一个图。 该组件的大多数道具是 。用法npmnpm install react-cytoscapejsnpm install [email protected] # your ...
react.min-15.5.js
05-04
react.js for windows 各个版本，免费下载 前端三大框架之一 react 各个版本，免费下载 如果下载不了，关注我，评论区联系我 React 是一个库。它允许你将组件放在一起，但不关注路由和数据获取。要使用 React 构建...
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
Vue3详细讲解
贫僧法号依平
05-15 853
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
echarts的柱状图使用
qq_45331969的博客
05-15 187
【代码】echarts的柱状图使用。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 819
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
最新发布
SongZhengxing_的博客
05-18 179
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
从零开始开发企业培训APP：在线教育系统源码剖析
meihusdk的博客
05-14 355
开发企业培训APP并非一朝一夕之功，需要全面的需求分析、合理的技术选型和系统的架构设计。在实际开发过程中，应不断根据用户反馈优化系统功能和用户体验。希望本文的剖析能够为有志于开发企业培训APP的开发者提供一些启示和帮助。
setupproxy.js
04-30
`setupproxy.js` 是一个用于配置代理服务器的脚本文件。它通常用于开发环境中，当需要在本地开发时，将请求转发到远程服务器上，以便调试和测试。 在 React 应用程序中，可以使用 `http-proxy-middleware` 模块来配置代理服务器。`setupproxy.js` 文件应该放置在项目根目录下，并且需要导出一个函数，该函数将接收一个 `app` 对象作为参数，用于配置代理服务器。 以下是一个简单的 `setupproxy.js` 文件示例： ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true, }) ); }; ``` 上面的示例将所有以 `/api` 开头的请求转发到 `http://localhost:5000` 上。`changeOrigin` 选项设置为 `true`，以便将请求头中的原始主机名替换为目标主机名。这是必需的，因为目标服务器可能会拒绝来自非原始主机的请求。 要使用该 `setupproxy.js` 文件，请在 `package.json` 文件中添加以下属性： ```json "proxy": "http://localhost:3000", ``` 上面的示例将所有请求代理到 `http://localhost:3000`，其中 `setupproxy.js` 文件将处理所有以 `/api` 开头的请求并将它们转发到 `http://localhost:5000` 上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值