HTTP-запрос происходит дважды (это оказался запрос опций)

внешний интерфейс

предисловие

Программирование должно быть делом всей жизни, а не просто 30-летней юностью 🍚
Эта статья была включенаGitHub https://github.com/ponkans/F2E, добро пожаловать, звезда, продолжайте обновлять

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

Каждая статья надеется, что вы можете что-то получить, этот разговорOPTIONSПросьба, после прочтения я надеюсь, что у вас есть эти достижения:

  • Роль и происхождение запроса OPTIONS
  • В каких сценариях возникает запрос OPTIONS
  • Как работать с ВАРИАНТАМИ для каждого запроса, что приводит к проблеме 2 повторяющихся накладных расходов на сетевой запрос

Функция и происхождение

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

Один из них называется «Совместное использование ресурсов кросс-происхождения» (Cross-origin resource sharing), что и является стандартом W3C, позволяющим преодолеть ограничения политики одного и того же происхождения.

Для запросов CORS браузеры делят их на два типа:Простые и непростые запросы, что будет объяснено позже.

Для непростых запросов браузер должен сначала использовать метод OPTIONS, чтобы инициировать предварительный запрос, чтобы узнать, разрешает ли сервер запрос из другого источника. После того, как сервер подтвердит разрешение, инициируется фактический HTTP-запрос. При возврате запроса предварительной проверки сервер также может уведомить клиента о том, нужно ли ему передавать идентификационные данные (включая файлы cookie, HTTP-аутентификацию и другие связанные данные).

Сценарий запроса OPTIONS

Сначала нам нужно отличить простой запрос от не простого запроса.

Пока верно следующее (рисунок из MDN), это простой запрос, и наоборот — непростой запрос.

Для запросов CORS, которые не являются простыми запросами, дополнительный HTTP-запрос, называемый «предварительным» запросом, будет добавлен перед формальным общением, чтобы узнать, разрешает ли сервер фактический запрос, и избежать неожиданных междоменных запросов к серверу.

Как показано на рисунке ниже, первый раз — это предварительный запрос OPTIONS, а второй раз — реальный запрос.

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

решение

Есть два способа борьбы с ним, давайте рассмотрим их по отдельности.

(1) Все используют простой запрос

Этот метод невозможен, ведь большинство сценариев — это непростые запросы. Например, нам нужно настроить некоторые заголовки, и многие другие сценарии приведут к тому, что запрос будет непростым запросом.

(2) Контроль доступа-Максимальный возраст

Заголовок ответа Access-Control-Max-Age указывает на возвращаемый результат предварительного запроса, то есть на то, как долго можно кэшировать Access-Control-Allow-Methods/Access-Control-Allow-Headers в секундах.

Например, на картинке ниже небольшой пример, написанный Weiwei с koa.Бэкенд единообразно устанавливает Access-Control-Max-Age, чтобы запрос OPTIONS не повторялся.

Суммировать

Эта статья была включенаGitHub https://github.com/ponkans/F2E, добро пожаловать, звезда, продолжайте обновлять

Детали определяют успех или неудачу, поделитесь небольшими знаниями о ВАРИАНТАХ с младшим партнером.

Предварительный просмотр следующей проблемы: «Утечки памяти из серии Big Front-End Advanced Node.js» (2).

Рекомендация горячего текста:


Если вам это нравится, добавьте подписку, поставьте лайк, спасибо 💕😊

Свяжитесь со мной / публичный аккаунт

✨Поиск в WeChat【водяной монстр] Или отсканируйте QR-код ниже, я приглашу вас в группу технического обмена. Честно говоря, в этой группе, даже если вы не говорите, просто чтение записей чата — это своего рода рост. (Али технический эксперт, автор Ao Bing, Java3y, старший клиент Mogujie, эксперт по безопасности Ant Financial, там все большие коровы).

Водяной монстр также будет регулярно создавать оригиналы, регулярно обмениваться опытом с небольшими партнерами или помогать читать резюме. Будьте внимательнее, не теряйтесь, есть возможность побегать вместе 🏃↓↓↓