[Брат, ты хочешь знать о кросс-доменном] обратном прокси NGINX

Серия статей:

[Младший брат, ты хочешь знать о кросс-доменном] JSONP
[Брат, ты хочешь знать о кросс-доменном] Основы CORS
[Брат, ты хочешь узнать о междоменных ресурсах] Расширенные статьи CORS
[Брат, ты хочешь знать о кросс-доменном] обратном прокси NGINX
[Брат, ты хочешь знать о кросс-доменном] ServerProxy

Изначально в этой серии статей не было намерения подробно писать об обратном прокси NGINX, а почему я не хочу писать, конечно, потому что я не очень в этом разбираюсь~~

2018-12-10-17-47-38

Однако недавно это блюдо заказывал большой парень, так что, конечно, его нужно подавать 😄

Что такое агент

Поскольку мы хотим поговорить об обратном прокси, мы должны сначала узнать, что такое прокси?

2018-12-10-17-51-05

прямой прокси

Например, вы покупаете букет цветов и хотите признаться Сяоли, соседке-испытательнице, но боитесь быть отвергнутым другими, поэтому вы доверяете цветы Сяохуну, испытательному другу, который обычно с Сяоли. Она помогла отправить цветы Сяоли. Это простой агентский процесс. Сяохун выступает в качестве агента, чтобы помочь вам подарить цветы Сяоли. Конечно, в реальности такая ситуация не рекомендуется, потому что трудно избежать посредников, зарабатывающих разницу в цене. 😂.

В приведенном выше примере, как клиент (реквестер), вы хотите инициировать запрос к серверу (Сяо Ли), но вы активно нашли третье лицо (Сяохун) для отправки запроса на сервер в качестве агента. , о котором часто говорят, что正向代理. Использование прямого прокси в Интернете в основном для научного доступа в Интернет. Вы хотите получить доступ к Google, но вы можете получить к нему доступ только через VPN-сервер в качестве прокси-сервера из-за брандмауэра. В настоящее время вам также следует найти надежный VPN производитель, чтобы избежать посредников, которые имеют значение 😄.

2018-12-10-19-09-12

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

Примеров обратного прокси много, например, вы один в постели и не можете спать по ночам, поэтому достаньте мобильник, зажгите экран и позвоните.10086, China Mobile случайным образом назначит незадействованного в данный момент MM службы поддержки клиентов, вы можете пообщаться с MM службы поддержки, спросить ее, где она живет, есть ли у нее парень, ее идентификатор WeChat, номер ее мобильного телефона, созвездие, гороскоп ... . ...

В этом примере China Mobile выступает в качестве обратного прокси-сервера, вам просто нужно набрать10086.Что касается того, будет ли он назначен ММ и какой ММ будет назначен, вы не знаете, пока он не подключен.Использование обратного прокси в Интернете в основном для достижения балансировки нагрузки.Когда вы посещаете веб-сайт, обратный proxy Сервер выберет для ответа вам свободный сервер из всех серверов текущего веб-сайта.Это используется для балансировки скорости загрузки каждого сервера.

2018-12-10-19-09-56

Измените хосты, чтобы завершить привязку доменного имени

пользователи Mac напрямую выполняютvim /private/etc/hostsДобавьте строку в конец файла hosts:

127.0.0.1 a.com

Что означает это предложение? Оно говорит нашему компьютеру получить доступa.comКогда вам не нужно запрашивать DNS, укажите прямо на нашу локальную машину.

ps: В среде win файл hosts находится вC:\Windows\System32\drivers\etcВ папке.Если у вас нет разрешения на его изменение, сначала скопируйте файл hosts в другое место, откройте его в редакторе и добавьте последнюю строку содержимого, затем вырежьте его в исходное место и замените.

Проверка: откройте окно командной строки и выполнитеping a.com, если доступ к IP-адресу 127.0.0.1, это означает, что наша привязка доменного имени завершена ^_^

6af89bc8gw1f8r5kn9ezgg202s02smzp

установить нгинкс

Чтобы сделать обратный прокси NGINX, вы должны установить егоnginx, Пример среды шагов установки в этой статье небольшой партнер Mac, выиграть, вы можете Baidu, эта вещь похожа.

Установите команду brew, выполнитеruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Установите nginx, выполнитеbrew install nginx
запустить nginxnginx, если у отчета нет разрешения, выполнитьsudo nginx

После запуска nginx открывается браузерlocalhost:8080, вы можете проверить.Появится следующий интерфейс, указывающий, что установка прошла успешно. 2018-12-10-19-31-35

Предварительное изучение конфигурации nginx

После настройки доменного имени хоста оно было успешно привязано.Теперь, если мы посетимa.comНа самом деле, он получит доступ к нашему собственному компьютеру, почему бы вам не попробовать?

доступ через браузерa.com

2018-12-10-19-58-29

Что это, черт подери, такое???? 2018-12-10-19-57-20

почему быНе удается получить доступ к этому сайтуЧто? Мы скачали и установили nginx и пока ничего не настраивали, дальше можно его немного настроить и все ОК:

Перейдите в каталог конфигурации nginx из командной строки.cd /usr/local/etc/nginx/servers
Создание и редактирование файлов конфигурацииvim test.conf, вставьте следующее в файл конфигурации

server {
    # 监听80端口号
    listen 80;

    # 监听访问的域名
    server_name a.com;

    # 根据访问路径配置
    location / {
        # 把请求转发到 https://www.baidu.com
        proxy_pass https://www.baidu.com;
    }
}

сохранить файл и выполнитьnginx -s reloadПерезапустите nginx (здесь была опечатка, спасибоStanYeДрузья предложили 😄)
Вернитесь в браузер, откройте вкладку a.com и выполните принудительное обновление.

2018-12-10-20-09-04

Поздравляем, вы завершили свою первую настройку nginx.

9150e4e5gy1ftr3ghw3rdg208c08cwg3

Создайте междоменную среду

Через серию подбрасываний мы смогли передать nginx вa.comВперед к Baidu.После выполнения первого шага мы создадим кросс-доменный кейс и шаг за шагом реализуем кросс-доменную конфигурацию через nginx.

Во-первых, добавьте каталог nginx во внешний и задний интерфейсы проекта, а пользователи сохранят коды внешнего и внутреннего интерфейса.Структура кода показана на рисунке ниже. 2018-12-10-19-38-25

Затем напишите внешний и внутренний код:

внешний код (./fe/nginx/index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CORS 实现跨域</title>
</head>
<body>
    <h3>CORS 实现跨域</h3>

    <script>
        var xhr = new XMLHttpRequest()
        xhr.open('GET', 'http://localhost:8888/api/getFriend')
        xhr.setRequestHeader('token', 'quanquanbunengshuo')
        xhr.withCredentials = true;
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText)
                console.log(xhr.getAllResponseHeaders())
            }
        }
        xhr.send()
    </script>
</body>
</html>

После написания внешнего кода запустите внешний веб-контейнер.live-server ./fe/nginx 2018-12-10-20-17-56

В командной строке появилось желтое предупреждение о том, что порт 8080 занят, почему это?Все, пожалуйста, задумайтесь. 2018-12-10-20-21-29

Переназначаем портlive-server ./fe/nginx --port=9999Ха-ха, поменяй команду, она все еще такая гладкая. ^_^

Внутренний код:

const http = require('http');

const PORT = 8888;

// 创建一个 http 服务
const server = http.createServer((request, response) => {
  console.log(request.headers)
  response.end("{name: 'quanquan', friend: 'guiling'}");
});

// 启动服务, 监听端口
server.listen(PORT, () => {
  console.log('服务启动成功, 正在监听: ', PORT);
});

Запустите серверную службуnode ./be/nginx/index.js

Улучшить конфигурацию nginx

Интерфейсный и внутренний коды подготовлены, и на этом этапе мы проделаем некоторые сухие вещи.Завершим окончательную настройку.

Сначала измените конфигурацию nginx и замените адрес Baidu на локальный интерфейсный адрес.

server {
    # 监听80端口号
    listen 80;

    # 监听访问的域名
    server_name a.com;

    # 根据访问路径配置
    location / {
        # 把请求转发到 http://127.0.0.1:9999
        proxy_pass http://127.0.0.1:9999;
    }
}

После изменения файла конфигурации nginx не забудьте выполнитьnginx -s -reloadПерезапустите nginx.
доступa.com

2018-12-10-20-34-13

Появилась знакомая ошибка...

Изменить адрес интерфейса во внешнем проекте

// 接口地址修改为当前域名下 /api 路劲下的 getFriend
xhr.open('GET', '/api/getFriend')

Измените файл конфигурации nginx

server {
    # 监听80端口号
    listen 80;

    # 监听访问的域名
    server_name a.com;

    # 根据访问路径配置
    location / {
        # 把请求转发到 http://127.0.0.1:9999
        proxy_pass http://127.0.0.1:9999;
    }

    # 监听根目录下的 /api 路径
    location /api/ {
        # 把请求转发到 http://127.0.0.1:8888
        proxy_pass http://127.0.0.1:8888;
    }
}

Недавно добавленный мониторинг пути API означает пересылку запроса о внутреннем API в серверный проект (ха-ха, конечно, поэтому требуется много внутренних интерфейсов)./apiНачало). После перезапуска nginx снова обновите браузер, результат, возвращенный бэкендом, успешно выведен в консоль, и эта задача междоменного доступа выполнена. 2018-12-10-20-46-57

Внимательные друзья наверняка узнали, в консоли другая ошибка, это потому что наш проект используетlive-serverДля этого инструмента требуется websocket.Мы можем решить эту проблему, добавив следующую конфигурацию.

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

2018-12-10-20-50-39

Ошибка исчезла 😄, теперь полный файл конфигурации nginx

server {
    # 监听80端口号
    listen 80;

    # 监听访问的域名
    server_name a.com;

    # 根据访问路径配置
    location / {
        # 把请求转发到 http://127.0.0.1:9999
        proxy_pass http://127.0.0.1:9999;

        # 兼容websocket
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    # 监听根目录下的 /api 路径
    location /api/ {
        # 把请求转发到 http://127.0.0.1:8888
        proxy_pass http://localhost:8888;
    }
}

Внешние и внутренние кодовые адреса:github

Суммировать

До сих пор мы добились междоменного доступа к API через обратный прокси nginx, в серии статейпервый разИнтерпретация кросс-доменности такова: кросс-доменность происходит из политики одного и того же происхождения, которая представляет собой поведение браузеров для обеспечения безопасности пользователей. Используемый нами обратный прокси-сервер nginx на самом деле является своего рода «уговорами» с браузером, что делает его думаю, что он получил доступ к Это API того же домена.На самом деле, настройка пакета производится на стороне сервера.Это так же, как когда вы набираете 10086 и решаете, что назначенный вам ММ обслуживания клиентов должен быть Китай Служба поддержки клиентов Mobile MM (также может появиться служба поддержки GG 😄 ) и служба поддержки клиентов China Mobile MM — это очень безопасный объект чата, нет необходимости ограничивать его...

Превью следующего эпизода: Наконец-то я доделал последнюю строку кода. Как наиболее часто используемый обратный прокси nginx в производственной среде, он намного проще, чем я думал. Потому что он включает в себя много шагов настройки. Давайте обсудим вместе в комментарии Ожидается, что в следующем разделе речь пойдет об агентах на стороне сервера.ServerProxyЭто то, что я тоже делаюИнструмент тестирования интерфейсаТехнические решения, которые необходимо использовать, До встречи.