配置服务器代理【setupProxy】代理http-proxy-middleware

使用React写项目时报错了：

组件页面代码：

class App extends Component {getStudentData = () => {axios.get('http://localhost:3000/api1/students').then(res => console.log(res)).catch(err => {console.log(err)})}getCarData = () => {axios.get('http://localhost:3000/api2/cars').then(res => console.log(res)).catch(err => {console.log(err)})}render() {return (<div><button onClick={this.getStudentData}>点我获取学生信息</button><button onClick={this.getCarData}>点我获取汽车信息</button></div>)}
}

以下规则是旧的，不好使了：

在src下创建配置文件：src/setupProxy.js，编写具体的规则
const proxy = require('http-proxy-middleware')module.exports = function(app) {app.use(proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)changeOrigin: true, //控制服务器接收到的请求头中host字段的值/*changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000changeOrigin默认值为false，但我们一般将changeOrigin值设为true*/pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)}),proxy('/api2', { target: 'http://localhost:5001',changeOrigin: true,pathRewrite: {'^/api2': ''}}))}

要用以下用法：

const { createProxyMiddleware } = require('http-proxy-middleware')module.exports = function (app) {app.use(createProxyMiddleware('/api1', {target: 'http://localhost:5000',secure: false,changeOrigin: true,pathRewrite: {'^/api1': '',},}),createProxyMiddleware('/api2', {target: 'http://localhost:5001',secure: false,changeOrigin: true,pathRewrite: {'^/api2': '',},}))
}

另外还有一个简单版本的配置：

在package.json中追加如下配置

"proxy":"http://localhost:5000"

说明：

优点：配置简单，前端请求资源时可以不加任何前缀。
缺点：不能配置多个代理。
工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

补充vue的代理服务器

 devServer: {proxy: {'/api': {target: 'http://127.0.0.1:3000',changeOrigin: true,pathRewrite: { '^/api': '' },},},},

配置服务器代理【setupProxy】代理http-proxy-middleware相关推荐

【转】Nginx服务器的反向代理proxy_pass配置方法讲解
[转]Nginx服务器的反向代理proxy_pass配置方法讲解转自:http://www.jb51.net/article/78746.htm 就普通的反向代理来讲 Nginx的配置还是比较简单的 ...
Tomcat系列之服务器的基本配置及Nginx反向代理tomcat服务
大纲一.Tomcat 基本配置 1.为Tomcat提供SysV脚本 2.catalina 脚本讲解 3.telnet 登录管理Tomcat 4.配置Tomcat虚拟主机 5.Tomcat图形管理接口 ...
Nginx中配置服务的反向代理(服务器集群技术)
需求:安装两个tomcat服务,通过nginx反向代理. 1:安装两个及以上tomcat 2:配置tomcat 修改端口:打开bin目录下的server.xml文件修改下面三个端口, 不能重复防止冲 ...
CAS (3) —— Mac下配置CAS客户端经代理访问Tomcat CAS
CAS (3) -- Mac下配置CAS客户端经代理访问Tomcat CAS tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0_65 nginx版本: nginx-1.9 ...
【Node】node.js实现服务器的反向代理，解决跨域问题
跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...
HTTP代理模块（HTTP Proxy）
HTTP代理模块(HTTP Proxy) 回目录 ·摘要这个模块可以转发请求到其他的服务器. HTTP/1.0无法使用keepalive(后端服务器将为每个请求创建并且删除连接).nginx为浏览器 ...
Nginx (一) Nginx介绍正向代理反向代理及配置
目录介绍Nginx Nginx处理高并发正向代理正向代理配置反向代理反向代理配置介绍Nginx Nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IM ...
Git 针对 GitLab Github 配置 HTTP HTTPS SSH 代理
文章目录配置 git 代理配置 git 的 http https 代理配置 git 的 ssh 代理配置 git 代理配置 git 的 http https 代理 Linux 和 Windo ...
nginx搭建本地服务器正向代理反向代理动态资源静态资源
前言在互联网架构中服务器分为Web服务器和应用服务器. Web服务器:一般指像nginx.apache这类的服务器,web服务器一般只能解析静态资源: 应用服务器:一般指像tomcat.jetty. ...
使用squid 解决内网服务器通过设置代理访问外网
背景线上算法服务有一个偶尔触发的逻辑需要访问三方的api,由于生产服务器无法访问外网,因此一直使用代理进行外网访问,最近代理服务器被重装了,由于该代理是前同事装的,导致这台服务器重装时候没有通知相应 ...

配置服务器代理【setupProxy】代理http-proxy-middleware

另外还有一个简单版本的配置：

补充vue的代理服务器

配置服务器代理【setupProxy】代理http-proxy-middleware相关推荐

最新文章

热门文章