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

 

寫代理js文件下面是文件內容

/**
 * Module dependencies.
 */
var browserSync = require('browser-sync').create()
var proxy = require('http-proxy-middleware') // require('http-proxy-middleware');

/**
 * Configure proxy middleware
 */

var jsonPlaceholderProxy = proxy('/api', {
  target: 'http://127.0.0.1:5000',
  changeOrigin: true,             // for vhosted sites, changes host header to match to target's host
  pathRewrite: {
    '^/api': ''
  },
  logLevel: 'debug'
})

/**
 * Add the proxy to browser-sync
 */
browserSync.init({
  server: {
    baseDir: './',
    middleware: [jsonPlaceholderProxy]
  },
  port: 8080,
  startPath: '/'
})

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