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. QT一个最简单的openGL例子

    创建一个基类为widget的工程 把文件夹glut64放到代码目录下,文件夹包含以下文件 freeglut.dll freeglut.lib glut.h freeglut.h freeglut_ex ...

  2. JS 数组相关的操作函数

    // 1.数组拼接 concat() var a = [1, 2]; var b = [3, 4]; console.log(a.concat(b)); // [1, 2, 3, 4] // 2.数组 ...

  3. ios11返回按钮问题

    在苹果系统升级到iOS11之后,页面的返回按钮的点击区域是根据设置的按钮的frame来确定的,在设置按钮太小的时候,点击就会出现点击多次才能点击到一次的现象,处理的方法就是设置按钮的frame变大代码 ...

  4. web添加学生信息(首发web)

    程序思路,先在JSP上画好页面,然后再创建一Servlet文件用于判断在网页上操作是否正确,还需要与数据库相连接,用DBUtile文件连接数据库,用Dao层来实现数据的增加,用Service来服务于D ...

  5. 【dmp文件还原到oralce数据库】

    1.数据库执行语句,创建一个用户并赋予权限 --创建用户CREATE USER test2 IDENTIFIED BY 123456 DEFAULT TABLESPACE USERS TEMPORAR ...

  6. BZOJ 3594: [Scoi2014]方伯伯的玉米田 (二维树状数组优化DP)

    分析 首先每次增加的区间一定是[i,n][i,n][i,n]的形式.因为如果选择[i,j](j<n)[i,j](j<n)[i,j](j<n)肯定不如把后面的全部一起加111更优. 那 ...

  7. C# 学习第二天笔记

    1. Convert 类型转换 数据类型不兼容的需要转换时,使用Convert转换.转成什么类型就to谁 例: string--> int string a=“b” Int  c= Conver ...

  8. vue中axios的二次封装

    我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...

  9. python中reversed()函数的用法

    reversed(a) # 返回一个反转的迭代器 举例 a = [1, 2, 3, 4, 5] b = reversed(a) # b是一个迭代器 # print(list(b)) = [5, 4, ...

  10. Vue_(组件)实例方法

    Vue.js实例方法/生命周期 传送门 常用的实例方法 数据: 传送门 vm.$set:设置属性值 vm.$delete:删除属性值 vm.$watch:观测数据变化 生命周期 vm.$mount:手 ...