Rational Analysis Ajax Междоменный

внешний интерфейс сервер браузер Ajax

Проблемы кросс-происхождения чаще встречаются во внешних интерфейсах. Чтобы решить междоменные проблемы, нам нужно понять, что вызывает междоменные проблемы?


Та же политика происхождения

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

Следует отметить, что браузер не ограничивает текущий источник от отправки информации в другие источники, но ограничивает получение данных из других источников.

Политика того же происхождения — это политика безопасности браузера. Использование небраузерной программы не имеет этого ограничения. Например, мы используем postman для тестирования нашего API без проблем с разными источниками. Также нет междоменной проблемы с использованием программы node.js для доступа к интерфейсу.

источник

Политика одинакового происхождения гласит, что источники должны быть одинаковыми. Так называемый источник — это часть перед путем URL-адреса файла. Например:

https://www.baidu.com/index.html

Часть перед INDEX.html называется исходным кодом. Источник включает в себя три части: протокол, доменное имя, порт.

В приведенном выше URL-адресеhttpsозначает согласие,www.baidu.comУказывает доменное имя и скрытый номер порта443.

И http, и https имеют соответствующие номера портов по умолчанию, номер порта по умолчанию для http — 80, а соответствующий номер порта для https — 443. Если вы хотите получить доступ к другим номерам портов, вам нужно отображать ввод при вводе.

Что касается источника, следует отметить, что доменное имя в источнике относится к доменному имени в узком смысле, а доменное имя третьего уровня и доменное имя второго уровня также являются разными доменными именами. Например:www.baidu.comа такжеbaidu.comЭто другое доменное имя.

вкратце,https://www.baidu.comЭтот источник толькоhttps://www.baidu.com:443Он считается таким же источником, как и он, и никакие другие символы не могут быть изменены, а соответствующий ip также считается другим источником.

Ограничения политики того же происхождения

Политика одинакового происхождения имеет два основных момента: одно и то же происхождение и ограничение сценариев.

javascript - это один из языков сценариев. Из-за тех же ограничений политики происхождения javascript DOM не может получить другие источники, файлы cookie, LocalStorage, IndexDB и запрос AJAX не могут правильно получить данные.


перекрестный домен

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

Кросс-происхождение (Cross origin), по-английски, на самом деле перекрестное происхождение. Чтобы решить проблему междоменного доступа, необходимо обойти политику одного и того же источника.

Для решения междоменной проблемы AJAX есть два решения: обратный прокси (начиная с исходного сервера), CORS (начиная с целевого сервера).

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

Обратный прокси-сервер может решить междоменные проблемы без изменения клиентской и серверной программ.

Давайте сначала поймем, что такое прокси.

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

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

При использовании VPN для работы в Интернете пользователь выбирает веб-сайт для посещения и отправляет запрос на прокси-сервер. Прокси-сервер перенаправляет запрос на сервер сайта и возвращает полученный результат пользователю. В этом процессе цель запроса определяется пользователем, а прокси-сервер заранее не знает, к какому целевому серверу осуществляется доступ. Это прямой прокси.

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

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

Решайте междоменные проблемы с обратным прокси

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

nginx, apache и другие серверы могут быть настроены с обратным прокси.

Например, текущий серверhttp://localhost:80хочу указать путь/Запросы в разделе пересылаютсяhttp://localhost:8080Вниз.

В nginx можно добавить следующую конфигурацию

location /
{
	proxy_pass http://localhost:8080;
}

CORS

Полное название CORS — Cross-origin resource sharing (совместное использование ресурсов между источниками), для которого требуется, чтобы версия IE не была ниже 10.

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

На этот раз W3C предоставляет набор стандартов, которым является CORS. С помощью CORS сервер может выборочно открывать часть данных.

Простейшей конфигурацией является настройка параметра Access-Control-Allow-Origin заголовка ответа на исходном сервере, который является источником, разрешенным контролем доступа. можно установить на*Чтобы все источники данных могли поднять сервер.

Конечно, некоторые параметры безопасности указаны в стандарте CORS. Например, разделите запрос на простые запросы и непростые запросы. Если вы выходите за рамки вашего простого запроса, вам потребуется дополнительная настройка.

простой запрос

Простые запросы ограничены следующим:

请求方法是以下 3 种方法之一：

1. HEAD
2. GET
3. POST

 HTTP的头信息不超出以下 5 种字段：
 
1. Accept
2. Accept-Language
3. Content-Language
4. Last-Event-ID
5. Content-Type：只限于 3 个值application/x-www-form-urlencoded、multipart/form-data、text/plain

При отправке простого запроса браузер автоматически добавит в заголовок запроса поле Origin, значением которого является текущий источник. После того, как целевой сервер получит запрос, если настроено поле Access-Control-Allow-Origin, он добавит Access-Control-Allow-Origin в заголовок ответа.

Когда браузер получает ответ, он проверяет значение Access-Control-Allow-Origin.

  • Выбрасывает, если нетNo 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8010' is therefore not allowed access.ошибка.
  • Если он не совпадает, он выкинетThe 'Access-Control-Allow-Origin' header has a value 'http://localhost:8010' that is not equal to the supplied origin.ошибка.
  • Если совпадение успешно, ответ будет проанализирован обычным образом.

не простой запрос

За рамками простых запросов находятся непростые запросы. Непростые запросы требуют предварительной проверки. При использовании непростого запроса браузер сначала отправит предварительный запрос, чтобы подтвердить, разрешены ли текущий метод запроса и заголовок запроса.Если это разрешено, отправьте другой запрос, чтобы получить возвращаемые данные.

Например, хотите использовать запрос на удаление. В это время вам необходимо настроить Access-Control-Request-Method на целевом сервере, который является методом запроса, разрешенным контролем доступа, и добавить к нему запрос на удаление.

Точно так же заголовки запроса вне допустимого диапазона должны быть настроены на целевом сервере Access-Control-Allow-Headers.

cookie

CORS по умолчанию не отправляет информацию о файлах cookie. В настоящее время, если мы хотим отправлять файлы cookie, мы должны настроить как запрос, так и целевой сервер. Если вы используете xhr для отправки запросов AJAX, вам необходимо выполнить следующую настройку:

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

И настройте поле Access-Control-Allow-Credentials на целевом сервере.

Access-Control-Allow-Credentials: true

Из соображений безопасности для Access-Control-Allow-Origin нельзя установить подстановочный знак, если необходимо отправить файл cookie. Источник должен быть указан явно.


Суммировать

  1. Проблема кросс-происхождения возникает из-за политики браузера в отношении одного и того же происхождения.
  2. Политика того же источника требует, чтобы протокол, имя домена и номер порта были одинаковыми, что ограничивает доступ сценариев к данным из других источников.
  3. Существует два решения для междоменного доступа Ajax: обратный прокси и CORS. Обратный прокси-сервер настраивается на исходном сервере, а CORS настраивается на целевом сервере.
    • Обратный прокси-сервер обходит политику того же источника, получая данные с целевого сервера через прокси-сервер.
    • Стандарт CORS заключается в предоставлении данных путем открытия доступа к целевому серверу.

Связанные очки знаний

  • JSONP
  • WebSocket

Ссылка на ссылку

Категории