Расскажите о нескольких решениях для того, чтобы почтовые запросы в axios стали ВАРИАНТАМИ

axios

причина

Я делал это два дня назад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

  1. установить qs
npm install --save qs
  1. конфигурация аксиом

я положил здесь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Когда есть несколько решений, пожалуйста, сообщите.