谈谈axios中Post请求变成OPTIONS的几种解决方案

栏目: jQuery · 发布时间: 5年前

内容简介:前两天在做试想一下,如果每个接口都这样调用两次,在前端需要多损耗多少资源,这个在复杂项目中的损耗是不可估量的。于是就查了一番资料,看到了很多不同的解决方法,说一下我解决这个问题的方法和问题原因。这里的

前两天在做 vue 项目的过程中使用 axios 做接口数据请求,很普通的一个接口,开发的过程中也没什么问题。自测的时候郁闷的发先,每个接口都调了两次,刚开始没太注意感觉两次请求是一摸一样的,仔细看了一圈,发现第一次调用的 Request Method: OPTIONS ,第二次调用的 Request Method: POST 。并且 OPTIONS 的请求也损耗了很多的资源。

谈谈axios中Post请求变成OPTIONS的几种解决方案
谈谈axios中Post请求变成OPTIONS的几种解决方案
谈谈axios中Post请求变成OPTIONS的几种解决方案

试想一下,如果每个接口都这样调用两次,在前端需要多损耗多少资源,这个在复杂项目中的损耗是不可估量的。于是就查了一番资料,看到了很多不同的解决方法,说一下我解决这个问题的方法和问题原因。

谈谈axios中Post请求变成OPTIONS的几种解决方案

解决方案

1. 使用 URLSearchParams

var params = new URLSearchParams()
params.append('param1', 'value1')
params.append('param2', 'value2')
复制代码

这里的 params 就是正确请求接口入参,这样的操作太复杂了,每次都要这样生成入参数据,实在太累OUT

2. 使用qs.stringify

  1. 安装qs
npm install --save qs
复制代码
  1. axios配置

我这里把 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 请求

谈谈axios中Post请求变成OPTIONS的几种解决方案

但是遗憾的是,虽然接口请求类型正确了,但是接口返回的数据错了,接口提示没有获取到正确的入参数据,跟后端的同学一起看了下,应该是入参的数据类型从 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 时候的几种解决办法,请各位多指教。

谈谈axios中Post请求变成OPTIONS的几种解决方案

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从需求到产品:0岁产品经理进阶之道

从需求到产品:0岁产品经理进阶之道

权莉 / 人民邮电出版社 / 2018-7 / 49.80元

本书主要针对刚入职的初级产品经理,从贴近工作状态的场景切入,对各阶段的知识点进行分类总结,旨在提供一套经过实践检验的产品方法论,为读者从初级产品经理成长为产品经理奠定坚实的基础。 书中提炼的方法和案例涵盖初级产品经理工作的方方面面,从基本技能到思维方式,从需求管理到产品规划定义,从框架选型到流程梳理,从工作模块拆解到案例剖析,用具体且贴合实际工作场景的内容,还原真实的产品工作方法及实践案例,既有方......一起来看看 《从需求到产品:0岁产品经理进阶之道》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具