Адреса обратного прокси-сервера Webpack devServer.proxy нечетких правил, аналогичная проблема

Node.js внешний интерфейс JavaScript Vue.js React.js Webpack

Когда мы развиваем Vue, React и другие проекты с помощью WebPack для конфигурации проекта, Запрашивание данных в режиме разработки будет включать в себя devserve.proxy, предусмотренный в нем, обратное проверенное проверенное промежуточное программное обеспечение Node.js.

Прокси Node.js просты. Простая настройка соединений промежуточного ПО прокси-сервера, экспресс, синхронизация браузера и многое другое. Из-за своей простоты небольшая деталь, которую разработчики легко упускают из виду.Адрес отдаленно похож

Пример

Например, в проекте есть два обратных прокси:

A: http://192.168.1.100:80
B: http://192.168.1.135:80

Порт игнорируем, в это время A и B проксируют на разные сервера. Добавим такой псевдоним к адресу прокси следующим образом:

proxy: {
  '/api': {
    target: 'http://192.168.1.100:80', // A Server
    changeOrigin: true,
    pathRewrite: {'^/api': '/api'}
  },
  '/api135': {
    target: 'http://192.168.1.135:80', // B Server
    changeOrigin: true,
    pathRewrite: {'^/api135': '/api'}
  }
}

/api Адрес /api на прокси-сервере A

/api135 /api-адрес под прокси-сервером B

Но если вы добавите его в этом порядке, есть скрытая яма правил именованияАдрес отдаленно похож

Предположим, когда мы посещаем / API135 / ABC, это реальный адрес B Server / API / ABC. В это время WebPack будет первым Match / API, а затем найдите конфигурацию прокси / API и, наконец, генерируют адрес сервера / API135 / ABC.

Здесь вы можете спросить, почему не адрес /api/xxx?

В это время Webpack только начал регулярно сопоставлять путь URL-адреса, то есть /^/xxx/, а затем запрашивать /api, но /api135 без изменения начального псевдонима. Сначала поймите, что объект цикла функции js зацикливается в порядке записи. Таким образом, за добавленным выше /api следует /api135.

Кратко продемонстрируйте процесс

const pathname = "/api135/abc"; // 输入的地址
const alias = "/api" // 代理别名
const targetAndPath = " http://192.168.1.100:80/api" // 代理地址：服务器+路径
const reg = RegExp("^"+alias); // 如果通过
if (reg.test(pathname)) { // 通过
    return pathname.replace(RegExp("^" + alias), targetAndPath); // http://192.168.1.100:80/api135/abc
}
// 不通过 迭代下一个

решить

Для решения этой проблемы таблица конфигурации прокси в проекте может быть отсортирована и записана только в порядке убывания имен, либо может быть изменен алиас, не относящийся ко всем совпадениям. следующим образом:

proxy: {
  '/api135': {
      target: 'http://192.168.1.135:80', // B Server
      changeOrigin: true,
      pathRewrite: {'^/api135': '/api'}
  },
  '/api': {
      target: 'http://192.168.1.100:80', // A Server
      changeOrigin: true,
      pathRewrite: {'^/api': '/api'}
  }
}

наконец

Если вы этого не понимаете, большинство студентов будут использовать основные Vue, React и другие фреймворки при настройке с помощью webpack.

Здесь я использую Vue в качестве примера. Другие фреймворки аналогичны, похожи на отношения между динамической маршрутизацией Vue и статической маршрутизацией, /about/tom и /about/:name.Чтобы соответствовать статической маршрутизации, вам часто нужно добавить его перед динамическая маршрутизация.

также равно

/api135
/api:path

*Заявление об авторских правах: эта статья является оригинальной и не может быть воспроизведена без разрешения.

Категории