react 添加代理 proxy
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的更多相关文章
- react 设置代理(proxy) 实现跨域请求
一,对于使用creat-react-app构建的项目,可以直接在package.json下配置,具体如下 "proxy": "http://api.xxxx.com&qu ...
- C#中给WebClient添加代理Proxy
效果图: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...
- 代理(Proxy)和反射(Reflection)
前面的话 ES5和ES6致力于为开发者提供JS已有却不可调用的功能.例如在ES5出现以前,JS环境中的对象包含许多不可枚举和不可写的属性,但开发者不能定义自己的不可枚举或不可写属性,于是ES5引入了O ...
- 深度揭秘ES6代理Proxy
最近在博客上看到关于ES6代理的文章都是一些关于如何使用Proxy的例子,很少有说明Proxy原理的文章,要知道只有真正掌握了一项技术的原理,才能够写出精妙绝伦的代码,所以我觉得有必要写一篇关于深刻揭 ...
- Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试
Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试 会撸码的小马 关注 2018.05.29 17:30* 字数 212 阅读 1488评论 0喜欢 2 接到上一章, ...
- JAVA设计模式-动态代理(Proxy)源码分析
在文章:JAVA设计模式-动态代理(Proxy)示例及说明中,为动态代理设计模式举了一个小小的例子,那么这篇文章就来分析一下源码的实现. 一,Proxy.newProxyInstance方法 @Cal ...
- 解决跨域、同源策略-React中代理的配置
React中代理的配置 主要是解决同源策略的问题 何为同源策略? 因为我们React在3000端口,Vue在8080端口,而后台接口往往在5000,这种不同的端口之间就是一种跨域的问题了 axios发 ...
- React Native & Google & Proxy
React Native & Google & Proxy https://snack.expo.io/ https://expo.io/snacks/@xgqfrms https:/ ...
- 浅谈Java代理一:JDK动态代理-Proxy.newProxyInstance
浅谈Java代理一:JDK动态代理-Proxy.newProxyInstance java.lang.reflect.Proxy:该类用于动态生成代理类,只需传入目标接口.目标接口的类加载器以及Inv ...
随机推荐
- nginx之root和alias区别
alias实现虚拟目录 alias与root的用法区别 最基本的区别:alias指定的目录是准确的,root是指定目录的上级目录,并且该上级目录要含有location指定名称的同名目录.另外,根据前文 ...
- vue 中echart折线自适应
前端时间做一个vue的项目,echart是按需引入的如下: // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts' // 引入折线图 i ...
- Wuss Weapp 微信小程序 UI 组件库
微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weapp 文档 https://phonycode.github.io/wuss-we ...
- BZOJ 1818: [Cqoi2010]内部白点 (BIT + 扫描线)
就是求多条线段的交点数,直接BIT+扫描线就行了. 注意不要算重最初存在的点. CODE #include<bits/stdc++.h> using namespace std; char ...
- 附:常见的Jdbc Type 与 Java Type之间的关系
附:常见的Jdbc Type 与 Java Type之间的关系 JDBC Type Java Type CHAR String VARCHAR String LONG ...
- fish-redux快速创建文件夹模板 FishReduxTemplate
推荐一款插件: 在插件plugins中搜 FishReduxTemplate
- php+提高大文件上传速度
PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...
- Confluence 6 删除一个附加的文件
你需要具有 删除附件(Delete Attachment)的空间权限来删除一个附加的文件. 希望删除一个附加文件的所有版本: 进入含有附件的页面中. Go to > Attachments 选 ...
- 编写批处理使用msbuild编译项目
echo off ::请把此bat脚本放到以下代码路径下 并在环境变量中配置对应版本的vs编译器的值 ::vs2017如:C:\Program Files (x86)\Microsoft Visual ...
- 记一次关于springboot的netty版本冲突问题
冲突的地放其实很多,大概都是类似,找不到哪个方法了: 类似于: Error starting ApplicationContext. To display the conditions report ...