Принцип и обработка POST запроса в OPTIONS

axios

После того, как Vue построил отладку интерфейса запроса, он, естественно, использует официально рекомендованный Axios, а затем столкнулся с небольшой проблемой: обычный запрос Post необъяснимым образом стал запросом OPTIONS.

Метод HTTP-запроса

Наиболее распространенными и часто используемыми HTTP-запросами в обычной разработке должны быть POST и GET. Но HTTP предоставляет более одного метода запроса.

  • GET: обычно используется для запроса сервера на отправку некоторых ресурсов.
  • HEAD: Информация о заголовке запрошенного ресурса, и эти заголовки такие же, как те, которые возвращаются при запросе метода HTTP GET. Один из сценариев использования этого метода запроса — получить размер большого файла перед его загрузкой, а затем принять решение. следует ли загружать, чтобы можно было сэкономить ресурсы пропускной способности
  • Опции: Используется для получения параметров связи, поддерживаемых ресурсом назначения
  • POST: отправить данные на сервер
  • PUT: используется для добавления ресурса или замены представления целевого ресурса полезной нагрузкой в ​​запросе.
  • DELETE: используется для удаления указанного ресурса
  • PATCH: используется для частичного изменения ресурсов.
  • CONNECT: зарезервировано в протоколе HTTP/1.1 для прокси-серверов, которые могут изменять подключения к каналам.
  • TRACE: повторить запрос, полученный сервером, в основном для тестирования или диагностики

Что касается конкретного применения этих методов, он не будет обсуждаться здесь.

Условие ошибки

В коде это явно запрос Post, но он показывает OPTIONS в панели управления Google, почему?

А ниже ошибка.

корень проблемы

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

Прочитав введение MDN в CORS (Реферальная ссылка CORS.),существуетФункциональный обзорПрочитав этот отрывок:

Стандарт совместного использования ресурсов между источниками (CORS: стандарт совместного использования ресурсов между источниками) добавляет новый набор полей заголовка HTTP, позволяя серверу объявлять, какие исходные сайты имеют разрешение на доступ к каким ресурсам через браузер. Кроме того, спецификация требует, чтобы для методов HTTP-запросов, которые могут оказывать побочные эффекты на данные сервера (особенно HTTP-запросы, отличные от GET, или POST-запросы в сочетании с определенными типами MIME), браузер должен сначала использовать метод OPTIONS для инициации предварительной проверки. запрос (предпечатный запрос), чтобы узнать, разрешает ли сервер междоменный запрос. Фактический HTTP-запрос не выполняется, пока сервер не подтвердит разрешение. В ответе на предварительный запрос сервер также может уведомить клиента о том, нужно ли ему передавать идентификационные данные (включая файлы cookie и данные, связанные с аутентификацией HTTP). Неудачный запрос CORS вызовет ошибку, но в целях безопасности невозможно точно знать, что пошло не так на уровне кода JavaScript. Вы можете только посмотреть на консоль браузера, чтобы увидеть, где именно произошла ошибка.

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

Теперь, когда вы знаете, в чем проблема, вам нужно привести отправленный запрос в соответствие с протоколом CORS. И согласно подсказке, данной ошибкойRequest header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.В сочетании с информацией в заголовке запроса на панели управления обнаруживается, что тип содержимого Access-Control-Allow-Headers не соответствует требованиям, поэтому запускается обнаружение CORS.

решение

Теперь, когда мы знаем, что причина изменения запроса заключается в том, что запускается обнаружение CORS, если оно соответствует спецификации CORS и избегает обнаружения, успех может быть гарантирован. Изучив данные, я обнаружил следующий контент, который можно избежать обнаружения. Оригинальный текст MDN выглядит следующим образом (простой запрос):

Некоторые запросы не вызывают предварительный запрос CORS. В этом документе говорится, что этот запрос является «простым запросом», обратите внимание, что этот термин не является спецификацией Fetch (где определена спецификация CORS). подобноЗапрос на удовлетворение всех следующих условий, запрос можно считать «простым запросом»:

  • Используйте один из следующих методов: ПОЛУЧАТЬ ГОЛОВА СООБЩЕНИЕ
  • Спецификация Fetch определяет набор полей заголовка, безопасных для CORS, и другие поля заголовка, отличные от этого набора, не должны устанавливаться вручную. Коллекция:
    1. Accept
    2. Accept-Language
    3. Content-Language
    4. Content-Type (дополнительные ограничения, о которых следует знать)
    5. DPR
    6. Downlink
    7. Save-Data
    8. Viewport-Width
    9. Width
  • Значение Content-Type ограничено одним из следующих трех:
    1. text/plain
    2. multipart/form-data
    3. application/x-www-form-urlencoded

Обратите внимание, что вышеуказанное требованиевыполнить все условия. В сочетании с информацией на панели управления и сообщением об ошибке формат отправляемой информации не принадлежит ни к одному из Content-Type. Таким образом, срабатывает обнаружение CORS, что приводит к неудачному запросу POST. Затем необходимо только сделать формат параметра одним из требований в приведенном выше Content-Type.

проверять

И то, что я передал на задний план в то время, было объектом Object с необработанными параметрами, который не принадлежал ни к одному из трех вышеперечисленных типов, поэтому решением было обработать переданные параметры для удовлетворения требований.

  • Строковое преобразование аргументов

    Искорените предыдущий опыт разработки и выполните параметрJSON.stringify()После обработки вы можете увидеть, что запрос может быть переключен, но параметры переходят на задний план, не являются фоном, который вы хотите. Таким образом, это может потребовать сотрудничество фона. PS: Последняя компания - обрабатывать такие параметры, как и подтверждено, что это действительно немного.

    Вы можете видеть, что параметры представлены в виде строк.

  • В аксиомах вы можете использоватьURLSearchParams API

    var data = new URLSearchParams();
data.append('id', '1');
data.append('name', 'minmin');
data.append('age', '23')
axios.post('url, data).then(
    res => {
        ...
    }
)

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

  • Решите это с помощью плагина, укажите ссылку в проектеqs

    npm install --save  qs
安装不上的用淘宝镜像，然后
cnpm install --save qs 

    //封装请求方法，所有参数统一用qs.stringify(data)处理
function httpRequest(url, method, data) {
    let rdata = { ...publicData, ...data }
    rdata = qs.stringify(rdata)
    if (method === "post") {
        return post(url, rdata)
    } else {
        return get(url, rdata)
    }
}

Вы можете видеть в исходном коде, что параметры были перекодированы.

Эпилог

Лично рекомендуется использовать плагины, чтобы решить проблему в проекте. Это трудоемкое и трудоемкое, чтобы передать параметр Append каждый раз. Конечно, если компания использует первый метод, чтобы пройти параметры на фоне, Там нет проблем без плагинов.

Категории