1 Случайная встреча - запрос опций
В недавно написанном проекте все ajax-запросы в приложении отправляются дважды. Из-за нового проекта базовый модуль построен заново, поэтому ожидается, что будут некоторые странные проблемы, ну наконец-то впервые встретился с запросом на живые параметры в Chrome devTools.
1.1 1-й запрос
Здесь сначала отправляется запрос дополнительных параметров, а информация о заголовке запроса запроса и заголовке ответа в браузере выглядит следующим образом:
(1) Ключевые поля заголовка запроса preflight request header:
| Request Header | эффект |
|---|---|
| Access-Control-Request-Method | Сообщите серверу, какой метод HTTP использовать для фактического запроса. |
| Access-Control-Request-Headers | Сообщите серверу настраиваемое поле заголовка, которое содержит фактический запрос.Тип содержимого в поле заголовка фактического запроса является настраиваемым. |
Сервер решает, принимать ли следующий фактический запрос на основе информации, полученной из заголовка предпечатного запроса.
(2) Ключевые поля заголовка ответа предпечатного ответа:
| response header | эффект |
|---|---|
| Access-Control-Allow-Methods | Возвращает запросы, разрешенные сервером, включая GET/HEAD/PUT/PATCH/POST/DELETE. |
| Access-Control-Allow-Credentials | Разрешить передачу файлов cookie между доменами (для файлов cookie должно быть установлено значение true для междоменных запросов) |
| Access-Control-Allow-Origin | Доменные имена, которые разрешают междоменные запросы, это может настроить некоторые белые списки доверенных доменных имен на сервере. |
| Access-Control-Request-Headers | Пользовательский тип содержимого поля заголовка, передаваемый запросом клиента. |
Этот запрос OPTIONS вернул содержимое заголовка ответа, но не вернул содержимое тела ответа.
1.2 2-й запрос
Это запрос на отправку, как показано на рисунке, это обычный почтовый запрос. вContent-Typeизapplication/jsonНа этот раз это формат содержимого запроса, согласованный с бэкендом, что также является одной из причин, по которой запрос опций отправляется позже.
2 О запросе OPTIONS
Из большого количества информации мы можем узнать, что использование метода OPTIONS для инициации запроса к серверу может определить, какие HTTP-методы поддерживает сервер. Но на этот раз мы не инициировали запрос OPTIONS, так почему запрос OPTIONS инициируется автоматически?
2.1 Запрос OPTIONS инициируется автоматически
MDNCORSВ статье упоминаются:
Спецификация требует, чтобы для методов HTTP-запросов, которые могут оказывать побочные эффекты на данные сервера (особенно HTTP-запросы, отличные от GET, или POST-запросы с определенными типами MIME), браузер должен сначала использовать метод OPTIONS для инициирования предварительного запроса (предварительного запроса). . ), чтобы узнать, разрешает ли сервер междоменный запрос.
Таким образом, этот междоменный запрос заставляет браузер автоматически инициировать запрос OPTIONS, чтобы увидеть, какие условия инициируются этим междоменным запросом.
2.2 При выполнении междоменного запроса запрос OPTIONS запускает условия
| Условия срабатывания запроса предварительной проверки CORS | Вызывает ли этот запрос условие |
|---|---|
| 1. Используйте следующееЛибоHTTP-метод: | |
| PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH | Нет, на этот раз почтовый запрос |
| 2. Установить вручнуювне следующих наборовПоля заголовка: | |
| Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width | Нет, другие поля заголовка не заданы |
| 3. Значение Content-TypeНе принадлежитодин из следующих: | |
| application/x-www-form-urlencoded, multipart/form-data, text/plain | да, для приложения/json |
Поскольку Content-Type был изменен на application/json, был запущен предварительный запрос CORS.
3 Оптимизируйте запрос OPTIONS: Access-Control-Max-Age или избегайте срабатывания
Видно, что при достижении условия срабатывания междоменный запрос всегда будет отправлять запросы 2. Можно ли оптимизировать увеличенное количество запросов? Ответ положительный, результат запроса предварительной проверки OPTIONS можно кэшировать.
Заголовок ответа Access-Control-Max-Age указывает максимальное время, в течение которого возвращаемый результат предварительного запроса (то есть информация, предоставленная методами Access-Control-Allow-Methods и Access-Control-Allow-Headers) может кэшироваться, Единица - секунды. (МДН)
Если значение равно -1, это означает, что кеш отключен, и каждый запрос должен предоставлять предварительный запрос, то есть использовать запрос OPTIONS для обнаружения.
Друзья в области комментариев напомнили вам, чтобы вы максимально избегали запуска запросов OPTIONS.В приведенном выше примере можно изменить тип контента. В других сценариях, таких как междоменные и корпоративные заголовки запросов, этого трудно избежать. Для сторонних подключаемых модулей ajax, таких как axios или superagent, которые используются в настоящее время, если возникает предварительный запрос CORS, вы можете проверить, стандартизирована ли конфигурация по умолчанию или вторичная инкапсуляция.
4 Резюме
Запрос OPTIONSпредварительный запрос, который можно использовать для обнаружения методов http, разрешенных сервером. Когда инициируется междоменный запрос, из соображений безопасности браузер запускает определенное условие перед официальным запросом.автоматическийСначала инициируйте запрос OPTIONS, то естьПредпечатный запрос CORS, если сервер принимает междоменный запрос, браузер продолжит инициировать формальный запрос.