[VUE] Обратный прокси-сервер конфигурации vue для решения междоменной проблемы

Vue.js

Прямой прокси и обратный прокси

Прокси вперед: Между клиентом и сервером-источником устанавливается прокси-сервер, чтобы получить контент с сервера-источника, клиент отправляет запрос на прокси-сервер и указывает цель (сервер-источник), а затем прокси-сервер пересылает запрос на исходный сервер и получает содержимое, возвращаемое клиенту. Клиенты должны выполнить некоторые специальные настройки, чтобы использовать прямой прокси.

Обратный прокси: Обратный прокси означает, что прокси-сервер принимает запрос на подключение в сети, затем перенаправляет запрос на сервер во внутренней сети и возвращает результат, полученный на сервере, клиенту, запрашивающему подключение. действует как обратный прокси-сервер для внешнего мира. Клиенту не нужно выполнять какие-либо настройки.

В архитектуре веб-сайта, где внешний и внутренний интерфейсы разделены, сервер часто необходимо настроить с обратным прокси-сервером, чтобы внешний интерфейс мог получить доступ к внутреннему интерфейсу через фиксированный адрес, чтобы задний Конечная служба может принимать меры по оптимизации производительности, такие как балансировка нагрузки, и быть прозрачной для интерфейсного приложения.

Предположим, что адрес внешнего сервера:http://127.0.0.1:8080, фактический адрес службы серверной части:http://server/web-service/userList, из-за междоменных проблем внешний интерфейс не может напрямую отправлять HTTP-запросы на этот адрес, но может отправлять запросы API только в том же домене. Например:http://127.0.0.1:8080/api/userList, Из приведенного выше введения мы узнали, что обратный прокси-сервер необходимо настроить на внешнем сервере для достижения цели пересылки запросов API на внутренний сервер.

выполнить

Конфигурация:config/index.jsсерединаproxyTable

dev{
	proxyTable: {
      '/api': {
        target: 'http://192.168.0.1:200', // 要代理的域名
        changeOrigin: true,//允许跨域
        pathRewrite: {
          '^/api': '' // 这个是定义要访问的路径，名字随便写
        }
   }
}

при его использовании:

// /api/getMenu相当于*http://192.168.0.1:200/getMenu
 // /api相当于http://192.168.0.1:200
 this.$http.get("/api/getMenu", {
 }
 .then(res => {
 })
 .catch(function(error) {
 });

Уведомление: Взяв приведенную выше настройку кода в качестве примера, все поля с /api в запросе будут заменены, такие как api/getMenu/api, два передних и задних будут заменены, что приведет к 404 и другим ошибкам, что легко, когда количество прокси велико.Эта проблема возникает.

Вышеупомянутая конфигурация разрешает междоменное взаимодействие только в среде разработки (dev). Чтобы решить междоменную проблему в производственной среде, вconfig/dev.env.jsа такжеconfig/prod.env.jsЗдесь нужно настроить запрошенный адрес в среде разработки/производства.API_HOST, мы используем прокси-адрес API, настроенный выше в среде разработки, и используем обычный адрес интерфейса в рабочей среде. Код конфигурации выглядит следующим образом:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',     //开发环境
  API_HOST:"/api/"
})

module.exports = {
  NODE_ENV: '"production"',      //生产环境
  API_HOST:'"http://40.00.100.100:3002/"'
}

принцип

В браузере запрещен кроссдомен, а на сервере не запрещен, работает локальноnpm run devПри ожидании команды на самом деле работает сервер с узлом, а IP-адрес несовместим с бэкэндом, поэтому возникнут междоменные проблемы.Вам нужно использовать такие методы, как JSONP, междоменный прокси и т. д., чтобы сделать междоменные запросы, и vue уже настроил его для нас, просто нужно установитьproxyTableПросто сделай это. следовательноproxyTableПо сути, запрос отправляется на собственный сервер, а затем сервер пересылает его на фоновый сервер, делая прослойку прокси, потому междоменных проблем не будет.

Нижний слой

vue-cli использует подключаемый модуль http-proxy-middleware для настройки прокси-серверов.

Категории