React配置代理proxy报错

最新推荐文章于 2024-04-07 11:49:33 发布
最新推荐文章于 2024-04-07 11:49:33 发布
阅读量761 收藏
点赞数
分类专栏： 笔记 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43453221/article/details/109777421
版权
本文档记录了在使用create-react-app构建React项目时遇到的反向代理proxy配置错误问题。根据作者的经验，通过正确配置多个代理设置，成功解决了报错，并分享了解决方案。
摘要由CSDN通过智能技术生成

用create-react-app构建项目用到反向代理：

按照配置报错如下：

Create React App 中文文档

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
   
  app.use
最低0.47元/天 解锁文章
攻城猴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react路由配置方式详解
08-29
React 路由配置方式详解 React 路由配置是 React 应用程序中一个非常重要的部分，它可以帮助我们实现客户端路由，并提供了许多有用的功能，例如参数传递、重定向等。本篇文章将详细介绍 React 路由配置的方式，并...
解决craco配置别名不生效，如何使用craco对react项目配置别名。
m0_70718568的博客
12-10 1296
如何使用craco配置react项目别名，怎么解决craco配置不生效的问题。
react脚手架配置代理踩的坑
wangxiao9505的博客
10-10 253
react配置setupProxy.js文件
记录一下react代理 遇到的问题
月色真美121的博客
09-18 913
react代理出现网络异常的情况
React中配置代理的bug
qq_45463384的博客
04-08 2188
React中配置代理的bug
react配置proxy出现报错：When specified, "proxy" in package.json must be a string. Instead, the type of "pro
microcosm1994的博客
05-09 5766
原因可能是react-scripts版本太高，不支持，在package.json中查看react-scripts的版本号，把node_modules/react-scripts删除了，重新安装 ：npm i react-scripts@1.1.1 --save
react跨域http-proxy-middleware配置完接口访问报404
01-03
在使用http-proxy-middleware的过程中，使用app.use()配置完代理后，发送请求报404。原因是虽然开启了代理，但是请求的url里多了一个/api/，这时我们需要把多余的/api/去掉，需要使用pathRewrite参数，把/api/设置成...
React降级配置及Ant Design配置详解
10-17
React降级配置主要涉及到的是对`create-react-app`创建的应用进行自定义配置，以适应对旧版浏览器（如IE11）的支持。首先，通过`create-react-app`创建一个新的项目目录，然后查看`package.json`文件，注意到默认的`...
VSCode配置react开发环境的步骤
08-28
VSCode 配置 React 开发环境的步骤 本篇文章主要介绍了 VSCode 配置 React 开发环境的步骤，旨在帮助开发者快速搭建 React 开发环境。下面是 VSCode 配置 React 开发环境的步骤： 一、安装 ESLint 插件 在 VSCode...
npx create-react-app xxx创建项目报错的解决办法
11-21
手头有一台大学时代的Windows电脑，它此前没有装过create-react-app，只装了node环境。版本信息：node -> 10.16.3...报错 好的:OK_hand:，那就根据上面的来呗，输入npx create-react-app，这时就出现了前文提到的错误，
使用react-create-app createProxy创建后端代理一直提示404的解决办法
最新发布
anbang_li的博客
04-07 703
使用文件名注意代理路径问题，可以联合后端响应一起调试。
React中proxy报错问题
weixin_44296432的博客
06-15 5437
React中proxy报错问题但是我发现，依然不行，有大佬能帮我解决一下吗？。。。。 When specified, “proxy” in package.json must be a string. Instead, the type of “proxy” was “object”. Either remove “proxy” from package.json, or make it a st...
react proxy 报错
weixin_34034670的博客
04-17 404
react项目中，package.json中proxy的配置如下 "proxy": { "/api/rjwl": { "target": "http://47.94.142.215:8081", "changeOrigin": true } } 就会报这样的错误 When specified, "proxy" in packag...
React中用http-proxy-middleware配置代理时报错:proxy is not a function
weixin_56202404的博客
04-02 1276
React中用http-proxy-middleware配置代理时报错:proxy is not a function 在配置代理的时候遇到proxy is not a function这个错误 代码是这样的 这个时候就要去查看你的http-proxy-middleware的版本如果是1.x以上的版本就是配置的问题 先说一个React中的配置代理的方式 1.在package.json文件夹中直接配置"proxy": "http://localhost:5000" 这个配置表示当你请求这个服务器的时候会
用http-proxy-middleware配置代理时报错:proxy is not a function
故里的博客
08-04 492
react项目中，安装http-proxy-middleware来配置反向代理启动时，项目报错proxy is not a function。 1.报错文件setupProxy.js（http-proxy-middleware安装后需要在src根目录下新建setupProxy.js），配置如下 const proxy= require('http-proxy-middleware');//报错源 module.exports = function(app) { app.use( proxy.
react 关于 proxy 配置报错
weixin_44555663的博客
07-02 688
问题： 在package.json 中配置proxy时出现了proxy is not a function 的错误，查看资料后发现是版本更新后不兼容。 解决办法： 安装http-proxy-middleware npm install http-proxy-middleware --save 在src中新建一个setupProxy.js文件，写入 const {createProxyMiddleware} = require('http-proxy-middleware'); module.ex
React配置代理使用setupProxy文件时ERR_CONNECTION_REFUSED错误解决
m0_55686063的博客
10-10 608
React中setupProxy文件配置错误解决
react中通过proxy解决跨域问题
热门推荐
qq_29854831的博客
03-06 3万+
一，对于使用creat-react-app构建的项目，可以直接在package.json下配置，具体如下"proxy": "http://api.xxxx.com"或者如果创建多个域，该如何设置proxy,能满足可以调用不同域下的API的需求？代码如下//package.json中加入 "proxy": { "/api/RoomApi": { "target": "http.
React 配置代理
07-16
在 React 中配置代理可以使用 `http-proxy-middleware` 库来实现。以下是配置代理的步骤： 1. 首先，安装 `http-proxy-middleware` 库： ```shell npm install http-proxy-middleware --save ``` 2. 在 React 项目的根目录下创建一个文件名为 `setupProxy.js` 的文件。 3. 在 `setupProxy.js` 文件中，导入 `http-proxy-middleware` 并配置代理： ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', // 设置需要代理的请求前缀 createProxyMiddleware({ target: 'http://api.example.com', // 设置代理目标地址 changeOrigin: true, // 修改请求头中的 Origin 属性 pathRewrite: { '^/api': '', // 可选配置，将请求前缀替换为空字符串 }, }) ); }; ``` 上述示例中，我们将以 `/api` 开头的请求代理到 `http://api.example.com`。 4. 运行 React 开发服务器时，`setupProxy.js` 文件会自动被加载，并将所有匹配到 `/api` 前缀的请求转发到目标地址。 请根据你的实际需求修改配置中的代理目标地址和请求前缀。配置完成后，你可以在 React 组件中发起以 `/api` 开头的请求，这些请求会被转发到代理目标地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值