共计 1830 个字符,预计需要花费 5 分钟才能阅读完成。
1、http-proxy-middleware 应用办法
在 src 目录下创立 setupProxy.js 文件
const proxy = require("http-proxy-middleware");
// app 能够了解为一个 express 实例
module.exports = function (app) {
app.use(proxy(['/mock/1241', '/mock/1105'], {
target: "http://10.118.71.83:3000/", // 指标服务器
changeOrigin: true // 默认 false,是否须要扭转原始主机头为指标 URL,是否进行代理
}),
);
}
http-proxy-middleware
会作为 target
的反向代理服务器,承受 http://localhost:3000/mock/1241/xxx
申请。
一些罕用参数阐明:
// proxy 中间件的选择项
var config= {
target: 'http://www.example.org', // 指标服务器 host
changeOrigin: true, // 默认 false,是否须要扭转原始主机头为指标 URL
ws: true, // 是否代理 websockets
pathRewrite: {
'^/api/old-path': '/api/new-path', // 重写申请,比方咱们源拜访的是 api/old-path,那么申请会被解析为 /api/new-path
'^/api/remove/path': '/path' // 同上
},
router: {
// 如果申请主机 == 'dev.localhost:3000',
// 重写指标服务器 'http://www.example.org' 为 'http://localhost:8000'
'dev.localhost:3000' : 'http://localhost:8000'
}
};
target:用于设置指标服务器 host。changeOrigin:默认 false,是否须要扭转原始主机头为指标 URL。ws:设置是否代理 websockets。pathRewrite:重写指标 url 门路。router:重写指定申请转发指标
具体能够参考:https://www.cnblogs.com/zhaow…
2、react 我的项目中是怎么执行 setupProxy.js 的?
在讲述原理之前,咱们先抛出一个问题:为什么间接在 src 目录下创立 setupProxy.js 文件就能够进行跨域申请了?上面带着这个问题来摸索一番。
既然在 react-scripts start
启动我的项目之后就能够跨域申请,那么必定是在编译完后生成本地服务过程中配置了 setupProxy.js 配置的中间件。就相当于 express 我的项目中学生成 express 实例,而后再应用实例的 use 办法配置中间件:
const app = express();
const bodyParser = require('body-parser');
// 应用 body-parser 解析申请 body 参数
app.use(bodyParser.json())
http-proxy-middleware
中间件的应用
const express = require('express');
const proxy = require('http-proxy-middleware');
var app = express();
app.use('/api', proxy({target: 'http://10.119.168.87:4000', changeOrigin: true}));
当运行 react-scripts start
时会执行 scripts 目录下的 start.js 脚本 start.js
如引入 config
目录下的 paths.js
以及根底构建脚本 webpack.config.js
和devServer
服务配置文件 webpackDevServer.config.js
paths.js
寄存的是一些文件门路映射,比方咱们的代理文件 setupProxy.js
webpack.config.js
就是根底的构建配置,比方款式加载解析、代码压缩等等。webpackDevServer.config.js
配置的就是咱们的本地服务,包含咱们的跨域申请
引入上述文件后,start.js
中会生成一个本地服务去执行构建、服务配置脚本
参考:https://www.cnblogs.com/zhaow…