Плагин http-proxy-middleware решает проблемы кроссдоменности, аутентификации и защиты изображений при разработке

Vue.js Webpack

Популяризируйте повседневное использование этого плагина, не объясняя очень простой 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-прокси, которую можно использовать для экспресс-подключения, синхронизации браузера и т. д.

Где он чаще всего используется?

Для кросс-доменных, таких как сотрудничество с использованием webpack-dev-server, в настоящее время самая популярная панель, vue react и некоторые инструменты поддержки были интегрированы, поэтому вы настраиваете несколько строк кода, вы можете кросс-домен вверх.

proxyTable: {
    '/api': {
        target: 'http://localhost:3000',// 后端真实接口地址
        changeOrigin: true,
    }
},

Обычный отправленный запрос

'http://localhost:3000/api/users/info'

Роль pathRewrite

Однако мы знаем, что многие интерфейсы внутри компании начинаются не с api, а напрямую начинаются с пользователей, classify, top и т. д. Невозможно написать много правил сопоставления, так что же делать? , соответствуют API, а затем становятся пустыми.

proxyTable: {
    '/api': {
            target: 'http://localhost:3000', // 后端真实接口地址
            changeOrigin: true,
            pathRewrite: {
           '^/api': '' //重写,
        }
    }
},

Реальный интерфейс запроса.

"http://localhost:3000/users/info"

Роль маршрутизатора

Переписать цель понятно, но обратите внимание, но вы должны указать полный URL-адрес http:// при его использовании.

использовать

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' одновременно, он фактически будет идти по адресу остаточного сервера, что легко спутать , См. ниже.

Аутентификация

Если вы просто хотите просто проверить, нужен ли интерфейсу токен, или когда мы используем некоторые зарядные интерфейсы, нам всегда нужно нести какие-то токены, вы можете сделать это.

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

        headers: {
            token: 'token'
        }
    }

реферер анти-пиявка

Иногда некоторые изображения, которые относятся к третьим лицам, будут разбивать изображение, вы можете использовать этот метод.

Проблема здесь в том, что мы не можем напрямую использовать тег img для отображения онлайн-адреса src, мы должны использовать библиотеки ajax, такие как axios, для запроса двоичного потока изображения, а затем генерировать URL-адрес через интерфейс URL.createObjectURL.

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-файлов безопасного домена некоторых других политик безопасности, которые привели к тому, что локальная среда разработки записывает 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(' ');
            }
        }
    }

Стоит отметить, что библиотеки ajax, такие как axios, должны быть настроены с учетными данными.

websocket

Просто добавьте еще один ВС: правда

дополнительный

В некоторых проектах архитектуры spa + node.js + backend или некоторых проектах ssr этот плагин также можно использовать в экспрессе, если вы не хотите сами писать прокси-сервер.


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

Категории