react package.json中proxy的配置如下

"proxy": {
"/api/rjwl": {
"target": "http://47.94.142.215:8081",
"changeOrigin": true
}
}

报错:

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 string.

原因 React 的 package.json 不支持proxy是对象,只支持字符串

// 这样可以使用
"proxy": "http://wxlive.gaing.cn",

解决办法

安装 http-proxy-middleware

yarn add http-proxy-middleware

在创建一个setupProxy.js文件,在src目录,src/setupProxy.js

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

module.exports = function (app) {
app.use(proxy('/api', {
target: 'http://www.test.com',
secure: false,
changeOrigin: true,
pathRewrite: {
"^/api": "/api"
}
}))
}

完成,运行

yarn start

作者:taoqun

地址:http://taoquns.com/paper/48

react 添加代理 proxy的更多相关文章

  1. react 设置代理(proxy) 实现跨域请求

    一,对于使用creat-react-app构建的项目,可以直接在package.json下配置,具体如下 "proxy": "http://api.xxxx.com&qu ...

  2. C#中给WebClient添加代理Proxy

    效果图: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...

  3. 代理(Proxy)和反射(Reflection)

    前面的话 ES5和ES6致力于为开发者提供JS已有却不可调用的功能.例如在ES5出现以前,JS环境中的对象包含许多不可枚举和不可写的属性,但开发者不能定义自己的不可枚举或不可写属性,于是ES5引入了O ...

  4. 深度揭秘ES6代理Proxy

    最近在博客上看到关于ES6代理的文章都是一些关于如何使用Proxy的例子,很少有说明Proxy原理的文章,要知道只有真正掌握了一项技术的原理,才能够写出精妙绝伦的代码,所以我觉得有必要写一篇关于深刻揭 ...

  5. Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试

    Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试 会撸码的小马 关注 2018.05.29 17:30* 字数 212 阅读 1488评论 0喜欢 2 接到上一章, ...

  6. JAVA设计模式-动态代理(Proxy)源码分析

    在文章:JAVA设计模式-动态代理(Proxy)示例及说明中,为动态代理设计模式举了一个小小的例子,那么这篇文章就来分析一下源码的实现. 一,Proxy.newProxyInstance方法 @Cal ...

  7. 解决跨域、同源策略-React中代理的配置

    React中代理的配置 主要是解决同源策略的问题 何为同源策略? 因为我们React在3000端口,Vue在8080端口,而后台接口往往在5000,这种不同的端口之间就是一种跨域的问题了 axios发 ...

  8. React Native & Google & Proxy

    React Native & Google & Proxy https://snack.expo.io/ https://expo.io/snacks/@xgqfrms https:/ ...

  9. 浅谈Java代理一:JDK动态代理-Proxy.newProxyInstance

    浅谈Java代理一:JDK动态代理-Proxy.newProxyInstance java.lang.reflect.Proxy:该类用于动态生成代理类,只需传入目标接口.目标接口的类加载器以及Inv ...

随机推荐

  1. Newnode's NOI(P?)模拟赛 第二题 dp决策单调优化

    其实直接暴力O(n3)DP+O2O(n^3)DP+O_2O(n3)DP+O2​优化能过- CODE O(n3)O(n^3)O(n3) 先来个O(n3)O(n^3)O(n3)暴力DP(开了O2O_2O2 ...

  2. 【Layui】Layui模板引擎生成下拉框不显示

    首先让我震惊了一下,layui引擎模板居然是支持ajax操作的 博主的需求是需要在数据表格内放入下拉框而下拉框的数据是数据库内查出来的(详见上一篇博客),但是下拉框怎么也显示不出来 找了四个小时的问题 ...

  3. 【环境配置】出现:Microsoft Visual C++ 14.0 is required 的解决方案

    参考blog https://download.csdn.net/download/amoscn/10399046 https://blog.csdn.net/weixin_42057852/arti ...

  4. docker使用 Flannel(etcd+flannel)网络

    一.Flannel网络简介 Flannel是一种基于overlay网络的跨主机容器网络解决方案,也就是将TCP数据包封装在另一种网络包里面进行路由转发和通信,Flannel是CoreOS开发,专门用于 ...

  5. Nowcoder的JS计时器题分析

    题目描述 实现一个打点计时器,要求1.从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 12.返回的对象中需要包含一个 ...

  6. [Android]第一个cm调试分析

    0x00:写在前面  一直想入门Android安全,当时是极客大挑战出题的时候,被cx表哥甩锅强行去学了点android的开发,之后慢慢接触,感觉还是挺有意思的.cx表哥说先从逆向分析入门吧,之后可以 ...

  7. 什么是SYN Flood攻击?

    SYN Flood (SYN洪水) 是种典型的DoS (Denial of Service,拒绝服务) 攻击.效果就是服务器TCP连接资源耗尽,停止响应正常的TCP连接请求. 说到原理,还得从TCP如 ...

  8. 『HGOI 20190917』Cruise 题解 (计算几何+DP)

    题目概述 在平面直角坐标系的第$1$象限和第$4$象限有$n$个点,其中第$i$个点的坐标为$(x_i,y_i)$,有一个权值$p_i$ 从原点$O(0,0)$出发,不重复的经过一些点,最终走到原点, ...

  9. flask框架(五): @app.route和app.add_url_rule参数

    @app.route和app.add_url_rule参数: rule, URL规则 view_func, 视图函数名称 defaults=None, 默认值,当URL中无参数,函数需要参数时,使用d ...

  10. Plx9030通讯卡驱动开发与接口封装

    在学校的时候,曾经采用DDK+Driverstudio+VC6.0环境做过9054视频采集卡的驱动开发,回想起调试过程,记得最清楚的就是过无数次的计算机蓝屏重启....今天第一天来到新公司,老大就说你 ...