React项目npm run start启动本地服务后浏览器访问http://localhost:3000

start命令也可自定义port指定本地运行端口(eg: PORT=3002)

对于单点登录关联的站点,通过DNS服务器指向,绑定域名和IP,此时项目访问不能使用localhost或计算机IP地址,需要使用域名访问,通过一些软件配置host(eg: 127.0.0.1 app.web.com)此时本地环境就可以访问http://app.web.com:3002。

对于网关映射的服务地址,也需要配置对应的host完成本地环境的接口请求、数据交互。

现在流行微服务,在一个项目中会出现访问请求多个服务器,http-proxy-middleware这个插件就能帮助我们实现业务需求。

http-proxy-middleware插件用于设置代理,转发请求给其他服务器,解决前端的跨域请求

插件安装:npm install --save-dev http-proxy-middleware

使用:

src目录下新建setupProxy.js:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {

// 将/userapi相关接口代理转发target对应的服务器上

// 相当于请求了http://appuser.web.com/userapi

app.use('/userapi', createProxyMiddleware({

target: 'http://appuser.web.com',

changeOrigin: true,// 默认为false,是否改变原始主机头为目标url

ws: true,// 是否代理websockets

pathRewrite: {// 重写path地址

'^/api/aaa': '/api/bbb'// 将请求的/api/aaa重写解析到/api/bbb

},

router: {// 用于重写目标服务器

// 当请求的host为172.14.14.102时重写目标服务器为后面的地址

'172.14.14.102': 'http://appuser.webapi.com'

}

}))

// 可以配置任意数量的转发,代理不同的接口和服务器

app.use('/adminapi', createProxyMiddleware({

target: 'http://appadmin.web.com',

changeOrigin: true,// 默认为false,是否改变原始主机头为目标url

ws: true,// 是否代理websockets

pathRewrite: {// 重写path地址

'^/api/ccc': '/api/ddd'// 将请求的/api/ccc重写解析到/api/ddd

},

router: {// 用于重写目标服务器

// 当请求的host为172.14.14.102时重写目标服务器为后面的地址

'172.14.14.102': 'http://appadmin.webapi.com'

}

}))

}

createProxyMiddleware这里是省略了第一个参数,表示匹配的路径,省略时表示匹配任何路径

createProxyMiddleware('/', {})、createProxyMiddleware({})、

createProxyMiddleware('**', {})都表示匹配任何路径,转发所有请求

也支持数组,函数等多种形式,数组表示匹配多个路径

createProxyMiddleware(['/api', '/data'], {})

还可以使用通配符来进行匹配

createProxyMiddleware('**/*.html', {})任何以.html结尾的请求

createProxyMiddleware('/userapi/*.html', {})userapi下所有以.html结尾的请求

createProxyMiddleware('!**/*.json', {})非!符号表示排除任何以.json结尾的请求

http-proxy-middleware原理是对nodejs的http-proxy库作了一层封装,支持http-proxy的option中的选项配置

React中http-proxy-middleware代理使用的更多相关文章

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

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

  2. react和vue配置本地代理

    React 在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可. 但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的 ...

  3. React网络请求跨域代理设置

    之前的之所以可以请求其他域名下的网络数据,是因为我们在服务端设置了相关配置,如下所示 如果将其注释掉,再次测试,如下所示 此时便无法跨域操作,接下来介绍下React如何实现跨域代理 (1)分析 Rea ...

  4. Spring中的cglib动态代理

    Spring中的cglib动态代理 cglib:Code Generation library, 基于ASM(java字节码操作码)的高性能代码生成包 被许多AOP框架使用 区别于JDK动态代理,cg ...

  5. Spring中的JDK动态代理

    Spring中的JDK动态代理 在JDK1.3以后提供了动态代理的技术,允许开发者在运行期创建接口的代理实例.在Sun刚推出动态代理时,还很难想象它有多大的实际用途,现在动态代理是实现AOP的绝好底层 ...

  6. java中InvocationHandler 用于实现代理。

    以下的内容部分参考了网络上的内容,在此对原作者表示感谢! Java中动态代理的实现,关键就是这两个东西:Proxy.InvocationHandler,下面从InvocationHandler接口中的 ...

  7. Tomcat 下配置OpenLayers proxy.cgi代理

    摘要:在OpenLayers访问WFS服务时,会遇到跨域的问题而导致服务无法访问.此时,需要在应用程序中设置代理,通过代理进行访问.本文介绍在tomcat进行proxy.cgi文件配置,以及在调用代理 ...

  8. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  9. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  10. React Native & Google & Proxy

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

随机推荐

  1. 使用Object.Defineproperties改变对象数据结构

    此方法设置键的时候如果需要使键为变量则需要加中括号[]  如下 let addKeys = Number(keys[keys.length - 1]) + 1 Object.assign(this.t ...

  2. 跳转到下一页面时,必须先勾选阅读xx须知/协议才可跳转功能

    当跳转到新的html页面时,先判断checkbox是否选中,选中-->跳转到新页面:未选中--弹出提示消息(请先同意须知) HTML: 1 <div class="choose& ...

  3. 01 | 堆、栈、RAII:C++里该如何管理资源?(极客时间笔记)

    基本概念 堆,英文是 heap,在内存管理的语境下,指的是动态分配内存的区域.这个堆跟数据结构里的堆不是一回事.这里的内存,被分配之后需要手工释放,否则,就会造成内存泄漏. C++ 标准里一个相关概念 ...

  4. Map的key是否可重复

    我们都知道Map的一大特性是key唯一不可重复,可是真的是这样的吗? 我们来试验一下: 运行结果: 我们可以看到在map里有两个同样的person作为key,打破了map的key不可重复的特性. 我们 ...

  5. 《手把手教你》系列基础篇(八十六)-java+ selenium自动化测试-框架设计基础-Log4j实现日志输出(详解教程)

    1.简介 自动化测试中如何输出日志文件.任何软件,都会涉及到日志输出.所以,在测试人员报bug,特别是崩溃的bug,一般都要提供软件产品的日志文件.开发通过看日志文件,知道这个崩溃产生的原因,至少知道 ...

  6. 网络协议自动化逆向工具开山鼻祖discoverer 分析

    本文系原创,转载请说明出处:信安科研人 也可关注微信公众号:信安科研人 原论文发表在2007年的USENIX上,链接如下:https://www.usenix.org/legacy/event/sec ...

  7. Promise了解

    Promise是一个构造函数,excutor是他的执行函数,同时也是构造函数的参数. new Promise(excutor) excutor有两个参数(resolve,reject) Promise ...

  8. React + TypeScript + Taro前端开发小结

    前言 项目到一段落,先来记录一下,本文以前端新手的角度记录React.TypeScript.Taro相关技术的开发体验以及遇到的问题和解决方法. 之前总说要学React(这篇博客:代码使我头疼之Rea ...

  9. python基础练习题(题目 模仿静态变量的用法)

    day27 --------------------------------------------------------------- 实例041:类的方法与变量 题目 模仿静态变量的用法. 程序 ...

  10. zookeeper篇-watch命令

    点赞再看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 文章不定期同步公众号,还有各种一线大厂面试原题.我的学习系列笔记. 每个路径节点都有一个watcher监控,当该节点数据改变时(CRUD), ...