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