http-proxy-middleware插件解決開發中跨域、鑑權、圖片防盜鏈問題

普及一下這個插件的一些平常使用方法，不講解很是基礎api，請搭配官方文檔觀看

先說說這個插件是幹嗎的吧。

The one-liner node.js http-proxy middleware for connect, express and browser-sync

Node.js proxying made simple. Configure proxy middleware with ease for connect, express, browser-sync and many more.

Powered by the popular Nodejitsu http-proxy.

個人理解，就是一箇中間件,是http-proxy的封裝，能給express,connect browser-sync等使用。

最經常使用在什麼地方？

用來跨域的，例如跟webpack-dev-server配合使用是如今最流行的吧，vue react等一些腳手架工具中也已經集成了，因此你配置幾行代碼，就能跨域了。

proxyTable: {
    '/api': {
        target: 'http://localhost:3000',// 後端真實接口地址
        changeOrigin: true,
    }
},
複製代碼

發出去的正常請求呢就是

'http://localhost:8000/api/users/info'
複製代碼

pathRewrite的做用

可是，咱們知道，公司內部的不少接口，不是api開頭的，直接users,classify,top等開頭，不可能寫不少匹配規則吧，那怎麼辦,pathRewrite能夠隨意修改路徑，匹配api,而後變成空。

proxyTable: {
    '/api': {
            target: 'http://localhost:3000', // 後端真實接口地址
            changeOrigin: true,
            pathRewrite: {
           '^/api': '/api' //重寫,
        }
    }
},
複製代碼

真實請求接口。

"http://localhost:3000/users/info"
複製代碼

router的做用

能夠理解就是重寫target,可是注意的是，但使用時必定要帶上http://的一個完整url地址

使用

axios.get('http://localhost:3000/rest/books/123') -> http://localhost:3000/rest/books/123 //攜帶http頭
複製代碼

配置

const routers = {
    '/rest': 'http://localhost:30001' 
};
const proxyTable = {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    logLevel: 'debug',
    pathRewrite: {
      '^/api': ''
    },
    router: routers
  }
};
複製代碼

爲何我推薦用攜帶http://開頭的完整路徑呢，由於當發送出去的請求地址，同時匹配'/api' '/rest'的時候，其實也會去rest的那個服務器地址下，容易混淆，下面請看。

鑑權

若是隻想簡單的驗證接口是否須要token，或者咱們在用一些收費接口的時候，總須要攜帶一些token，能夠這麼作。

proxy: {
    '/mmbiz_png': {
        target: 'https://mmbiz.qpic.cn',
        changeOrigin: true,

        headers: {
            token: 'token'
        }
    }
複製代碼

referer防盜鏈

有時候一些引用第三方的圖片會破圖的現象，能夠用這種辦法。

這裏有點麻煩的就是，咱們不能直接用img標籤去渲染一個src的在線地址，咱們得用axios等ajax庫去把圖片二進制流請求回來，而後經過URL.createObjectURL接口生成一個url

axios
  .get(
    '/mmbiz_png/微信圖片 ) .then(({data}) => { var img = document.createElement('img') var url = window.URL.createObjectURL(data) img.src = objectUrl img.onload = () => { window.URL.revokeObjectURL(url) } document.body.appendChild(img) }) 複製代碼

proxy: {
    '/mmbiz_png': {
        target: 'https://mmbiz.qpic.cn',
        changeOrigin: true,
        headers: {
            referer: '' //測試了，可加可不加,加上最好。
        }
    }
複製代碼

onProxyRes（cookie跨域的場景）

還有一個業務場景就是，當咱們本地調試測試或者線上代碼的時候，會由於後端cookie設置了一些secure domain等安全策略，而致使本地開發環境cookie寫不進去。這是由於因爲同源策略的限制，所讀取的cookie爲跨域請求接口所在域的cookie，而非當前頁。若是想實現當前頁cookie的寫入，則用如下辦法。

雖然官方文檔有說能夠用cookieDomainRewrite 和cookiePathRewrite來搭配，可是曾經看到一種挺好的辦法。

proxy: {
    '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        },
        headers: {
            referer: '' //
        },
        onProxyRes(proxyRes) {
            const key = 'set-cookie';
            if (proxyRes.headers[key]) {
                const cookies = proxyRes.headers[key].join('').split(' ');
                // 切割掉一些嚴格的安全校驗，只保留了第一項和Path，這樣secure、domain都被忽略了。
                proxyRes.headers[key] = [cookies[0], 'Path=/'].join(' ');
            }
        }
    }

複製代碼

值得一提的是，axios等ajax庫，得配置withCredentials

websocket

加多一個就好 ws: true

額外的

在一些spa + node.js + 後端架構的項目裏，或者一些ssr項目上，這個插件也能夠在express中使用，若是你本身不想寫代理服務器的話。

var express = require('express')
var proxy = require('../../index') // require('http-proxy-middleware');


var option = proxy({
  target: 'www.xxx.com',
  changeOrigin: true,
  logLevel: 'debug'
})

var app = express()

app.use('/api', option)

app.listen(3000)

複製代碼

更多

點擊查看

參考

基本用法

demo