談談axios中Post請求變成OPTIONS的幾種解決方案

原由

前兩天在作 vue 項目的過程當中使用 axios 作接口數據請求，很普通的一個接口，開發的過程當中也沒什麼問題。自測的時候鬱悶的發先，每一個接口都調了兩次，剛開始沒太注意感受兩次請求是一摸同樣的，仔細看了一圈，發現第一次調用的 Request Method: OPTIONS ，第二次調用的 Request Method: 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
複製代碼

2. 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 請求

可是遺憾的是，雖然接口請求類型正確了，可是接口返回的數據錯了，接口提示沒有獲取到正確的入參數據，跟後端的同窗一塊兒看了下，應該是入參的數據類型從 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 時候的幾種解決辦法，請各位多指教。