browser-sync + http-proxy-middleware 配置代理跨域

写代理js文件下面是文件内容

 1 /**
 2  * Module dependencies.
 3  */
 4 var browserSync = require(''browser-sync'').create()
 5 var proxy = require(''http-proxy-middleware'') // require(''http-proxy-middleware'');
 6 
 7 /**
 8  * Configure proxy middleware
 9  */

35 var jsonPlaceholderProxy = proxy(''/api'', {
36   target: ''http://127.0.0.1:5000'',
37   changeOrigin: true,             // for vhosted sites, changes host header to match to target''s host
38   pathRewrite: {
39     ''^/api'': ''''
40   },
41   logLevel: ''debug''
42 })
43 
44 /**
45  * Add the proxy to browser-sync
46  */
47 browserSync.init({
48   server: {
49     baseDir: ''./'',
50     middleware: [jsonPlaceholderProxy]
51   },
52   port: 8080,
53   startPath: ''/''
54 })
55 
56 console.log(''[DEMO] Server: listening on port 8080'')

随后在package.json中配置script字段，npm启动此代理即可，

注意，此处我遇到一个坑，下面参考资料的port:8080写在init函数server选项里面的话，启动出来的端口是一个随机分配的端口

　　　　并不是我们配置的8080口，需要把port选项发到server平级即可启动对应端口

参考资料

https://github.com/chimurai/http-proxy-middleware/blob/master/examples/browser-sync/index.js

browserSync+http-proxy-middleware配置跨域代理

angular.js+gulp项目中配置跨代理 gulpfile.js中代码如下：

var browserSync = require(''browser-sync'');
var proxyMiddleware = require(''http-proxy-middleware'');
gulp.task(''browserSync'', function () {
    var middleware = proxyMiddleware(''/cgi'', {
        target: target,    // 目标地址
        changeOrigin: true,     // 是否允许跨域
        logLevel: ''debug'' ,
        pathRewrite: {
            ''^/cgi'': ''/cgi''    //重写
        }
    });

    browserSync.init({
        port: 8080  // 修改端口为8080
        server: {
            baseDir: ''./'',
            port: 4444,
            middleware: [middleware],   //引用middleware
        }
    });
});
gulp.task(''dev'', [''browserSync'', ''dev:watchcxdataAPP'']);

转自 https://github.com/chimurai/http-proxy-middleware/blob/master/examples/browser-sync/index.js

Browsersync使用http-proxy-middleware转发请求到mock服务器

背景

最近对项目里的老代码进行了一些优化和整改，其中一个便是对mock的优化。

老代码

方案

将mock代码先使用babel从es6编译为es5，再自己写了一个中间件mockApiMiddleware（实际就是一个方法接收处理reques，response，next），根据request从mock中获取到数据再response给前端。
browsersync示例：

const webpackDevMiddleware = require(''webpack-dev-middleware'')
const webpackHotMiddleware = require(''webpack-hot-middleware'')

module.exports = function() {
    ...
    middleware: [
        mockApiMiddleware(), // 自定义mock服务中间件
        webpackDevMiddleware(params), // webpack中间件，params是webapck编译后相关路径等参数
        webpackHotMiddleware(params),
]
}

弊端

1. 当mock的代码改变后，需要重启（即重新babel编译原来的mock）才能刷新mock数据。
2. mock中若依赖项目代码的一些常量等文件，babel还需要增加引用了的项目代码的编译，否则会报错（不支持项目的es6代码）。

新代码

方案

为了解决如上问题，决定将架构修改为：

1. 解决弊端2 ==> 使用node server作为mock的服务器，和browsersync不共用服务端口，新的mock server使用4000端口（browsersync使用8080）。
2. 解决弊端1 ==> 使用nodemon监听到文件修改自动重启mock服务。
3. 由于现在mock服务和browsersync不在同一个端口启动，前端通过browsersync启动后发送的mock请求依旧是请求8080端口，因此新增http-proxy-middleware进行转发，将8080端口（原请求）的请求转发到4000端口（mock服务端口）。
4. 根据上述方案，发现如果这样设计我们需要同时启用2个cmd窗口，为了开发方便，我们想要一条命令npm start即可。concurrently 和 npm-run-all可以解决这个问题，不需要开新的cmd窗口并行执行多条cmd命令。

实现

新建mock server

新建node服务器时，使用express、koa等能减少很多工作。由于在本次项目中，原来的mockApiMiddleware代码是可以复用的，因此简单使用node新建服务即可。

// createProxyMiddleware没有传递next，这里只是为了兼容老代码
const next = () => {
  info(`can not find in mock data.`)
}
// 获取mock数据的业务代码
const mockApiMiddleware = function (req, res) {
  info(`Request Method-> ${req.method}, URL -> ${req.url}`)
  const mockArray = mocker.getMocks()
  if (req.method.toUpperCase() === ''GET'') {
    handleGetRequest(req, res, next, mockArray)
  } else if (req.method.toUpperCase() === ''POST'' || req.method.toUpperCase() === ''PUT'') {
    handlePostRequest(req, res, next, mockArray)
  } else if (req.method.toUpperCase() === ''PATCH'') {
    handlePatchRequest(req, res, next, mockArray)
  }
}

const server = http.createServer((req, res) => {
  mockApiMiddleware(req, res)
})
server.listen(4000)
info(`mock server start on port 4000. \r\n\r\n`)

nodemon启动mock

在package.json的scripts中新增如下配置，npm run mock启动服务后，watch的文件改变时，自动重启。

-w 配置监听的文件，监听多个文件时用多个-w表示。
./mock/server.js 是启动服务的文件
--exec配置为使用babel-node运行（es6文件可以直接执行，不用babel预编译）

"mock": "nodemon --legacy-watch -w ./mock -w [other watch files] ./mock/server.js --exec babel-node"

browsersync示例

http-proxy-middleware 1.0+版本中，使用createProxyMiddleware方法新建转发中间件。

const webpackDevMiddleware = require(''webpack-dev-middleware'')
const webpackHotMiddleware = require(''webpack-hot-middleware'')
const { createProxyMiddleware } = require(''http-proxy-middleware'')

module.exports = function() {
    ...
    middleware: [
        webpackDevMiddleware(params), // webpack中间件，params是webapck编译后相关路径等参数
        webpackHotMiddleware(params),
        createProxyMiddleware(''/api/v1'', { // 路径匹配
              target: ''http://localhost:4000'', // 要转发的目标地址
              changeOrigin: true, // for vhosted sites, changes host header to match to target''s host
            }),
    ]
}

npm run同时执行多个

concurrently 和 npm-run-all同样有用，项目中已经有npm-run-all，因此选择了它。
--parallel参数表示并发执行
gulp-dev可以是任何启动前端的命令

"start":"npm-run-all  --parallel mock gulp-dev"

结果

现在只需要运行npm run start，就可以同时启动2个服务啦，并且mock数据修改后立马生效，再也不用重启了。

关于如何使用http-proxy-middleware？客户端和服务器 api 没有通信和调用http服务的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于-> middleware（['api']）和-> middleware（['auth：api']）有什么区别？、browser-sync + http-proxy-middleware 配置代理跨域、browserSync+http-proxy-middleware配置跨域代理、Browsersync使用http-proxy-middleware转发请求到mock服务器的相关信息，请在本站寻找。