Подробное объяснение междоменного запроса axios

axios

Предыстория написания этой статьи связана с тем, что запрос на получение, инициированный axios, является нормальным в междоменной ситуации, почтовый запрос отправляет запрос параметров до отправки формального запроса, а внутренний интерфейс не имеет совместимых параметров. в результате дело 404.

При решении этой задачи я с любопытством проверил ее и добавил себе некоторые очки знаний.

Существует два типа междоменных запросов

Проще говоря, изJavaScriptкод инициированXMLHttpRequestСуществует два типа запросов:

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

не сработаетCORS预检запрос, но отправить запрос непосредственно на сервер, чтоCORS预检Позже мы скажем, что правила сопоставления примерно таковы:

  1. Метод запросаGET,HEAD,POSTодин из
  2. Радикальные поля безопасности CORS находятся в следующих наборах:
    • ACCEPT
    • Accept-Language
    • Content-Language
    • DPR
    • Downlink
    • Save-Data
    • Viewport-Width
    • Width
    • Content-Type (值仅限text/plain,multipart/form-data,application/x-www-form-urlencoded)
  3. в запросеXMLHttpRequestUploadОбъект не имеет зарегистрированных прослушивателей событий
  4. нет в запросеReadableStreamобъект

Запрос перед полетом:

Прежде чем отправить официальный запрос,OPTIONSЗапрос предварительной проверки отправляется на сервер, чтобы узнать, разрешает ли сервер фактический запрос. Если нет, запрос не будет отправлен. Правила сопоставления следующие:

  1. Метод запроса:PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCHодин
  2. искусственно установленныйCORS安全部首字段集合поля снаружи
  3. в запросеXMLHttpRequestUploadУ объекта есть зарегистрированные прослушиватели событий
  4. используется в запросеReadableStreamобъект

В междоменном запросе, если сервер возвращает правильный заголовок междоменного ответа:Access-Control-Allow-Origin,Access-Control-Allow-Method,Access-Control-Allow-Headers, междоменный запрос может нормально получать данные.

задача решена

В соответствии с приведенными выше точками знаний, отследите возникшие проблемы и найдите радикал запроса axios.Content-TypeЗначение по умолчанию равноapplication/json;charset=utf-8,а такжеPOSTДанные запросаjsonформат, такPOSTЗапрос сначала выдаст предварительный запрос. Если ответ сервера на предварительный запрос не поддерживается, запрос будет завершен.

В соответствии с причинами, проанализированными выше, ниже перечислены два решения:

Улучшить интерфейс сервера и междоменные радикалы ответа

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

Внешний интерфейс обрабатывает данные POST-запроса axios.

Преобразуйте запрос на простой запрос при перекрестном происхождении:

  1. запрос радикаловContent-Typeустановить какapplication/x-www-form-urlencoded
  2. иметь дело сPOSTСуществует два способа запроса данных:
    • пройти черезURLSearchParamsгенерироватьPOSTзапрошенные данные
    • использоватьqsБиблиотекаstringifyAPI преобразует данные запроса (Если значение поля в данных запроса является ссылочным типом, его необходимо сначала обработать с помощью JSON.stringify, чтобы сервер не смог его распознать.)

пример:

/* 通过 qs 模块处理请求数据*/
import axios from 'axios'
import qs from 'qs'

axios.defaults.withCredentials = true // 若跨域请求需要带 cookie 身份识别
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 请求拦截器
axios.interceptors.request.use(req => {
    // 对 post 请求数据进行处理
    if (req.method === 'post') {
        Object.keys(req.data).forEach(item => {
            !isPrimeval(req.data[item]) && (req.data[item] = JSON.stringify(req.data[item]))
        })
        req.data = qs.stringify(req.data)
    }
    return req
}, error => {
    // 请求出错时处理
    return Promise.reject(error)
})

or

/* 通过 URLSearchParams 生成 POST 请求数据 */
import axios from 'axios'

async function anInterface (url, params = {}) {
    let data = new URLSearchParams()
    for(let key in params) {
        data.append(params[key])
    }
    const res = await axios.post(url, data)

    // 处理数据
    
    return res.data
}

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

Выше приведено все содержание данной статьи.Если есть какие-то проблемы,поправьте меня,если нужно перепечатать,укажите источник

Категории