причина
Я делал это два дня назадvue
используется во время проектаaxios
Выполнение запросов данных интерфейса является очень распространенным интерфейсом, и в процессе разработки нет проблем. Во время самопроверки я был подавлен, и каждый интерфейс был настроен дважды.Поначалу я не обращал особого внимания на ощущение, что два запроса были совершенно одинаковыми. После внимательного осмотра я обнаружил, что первый звонок был сделан.Request Method: OPTIONS
, второй звонокRequest Method: POST
. а такжеOPTIONS
Запрос также потребляет много ресурсов.
Только представьте, если каждый интерфейс будет вызываться так дважды, сколько ресурсов будет потребляться во фронтенде, а в сложных проектах эти потери несоизмеримы. Поэтому я проверил некоторую информацию, увидел много разных решений и рассказал мне, как я решил эту проблему и причину проблемы.
решение
1. Использование URLSearchParams
var params = new URLSearchParams()
params.append('param1', 'value1')
params.append('param2', 'value2')
здесьparams
Правильно запрашивать входные параметры интерфейса, слишком сложная операция, слишком утомительно каждый раз генерировать данные входных параметров.
2. Используйте qs.stringify
- установить qs
npm install --save qs
- конфигурация аксиом
я положил здесьaxios
На упаковке написаноsrc/plugins/ajax.js
import axios from 'axios'
import qs from 'qs'
// 添加响应拦截器
axios.interceptors.request.use(
config => {
if (config.method === 'post') {
config.data = qs.stringify(config.data)
}
return config
},
error => {
console.log(error)
Promise.reject(error)
}
)
Давайте посмотрим здесь, на самом делеaxios
Перехватывать запрос перед инициированием запроса, когда тип запросаpost
При , введите данные входного параметра запросаqs.stringify
Давайте посмотрим на сравнение формата данных до и после.
// qs.stringify 前
{
"userId": "520b0ec329164dd9a4f216ba8d209029",
"startTime": "1548950400000",
"endTime": "1551369599999"
}
// qs.stringify 后
"userId=520b0ec329164dd9a4f216ba8d209029&startTime=1548950400000&endTime=1551369599999"
В это время я рассмотрю запрос, который я инициировал в фоновом режиме.OPTIONS
Его больше нет, просто запустил обычныйpost
просить
Но к сожалению, хотя тип запроса интерфейса правильный, данные, возвращаемые интерфейсом, неверны, и интерфейс подсказывает, что не были получены правильные входные данные. Давайте посмотрим на внутренних студентов. Это должны быть данные тип входного параметра из
json
сталиstring
, бэкенд не может быть получен корректно.Здесь учащимся в бэкенде нужно получить входные параметры и отформатировать полученные данные. Это все сделано.
3. Используйте Access-Control-Max-Age
Вот самое простое решение, пока учащиеся бэкенда настраивают данные междоменного запроса, добавляютAccess-Control-Max-Age
, этот параметр означает поставитьOPTIONS
Закешировано, повторно не запустится в указанное времяOPTIONS
Предварительный запрос, поэтому только по первому запросуOPTIONS
, если это время достаточно велико, оно не потребляет слишком много ресурсов, что является обходным решением.
// 后端设置,2592000单位秒,这里是30天
response.addHeader( "Access-Control-Max-Age", "2592000" )
открыть в консолиDisable cache
, вы можете видеть, что запрос также имеетOPTIONS
, закрытиеDisable cache
После этого смотри запрос пропалOPTIONS
Вот кто мыaxios
Если встречается сложный запросOPTIONS
Когда есть несколько решений, пожалуйста, сообщите.