axios 請(qǐng)求中默認(rèn) headers 的 Content-Type 屬性為 application/json 類型咏瑟，這種類型在跨域時(shí)捣卤，瀏覽器會(huì)先發(fā)送 options 請(qǐng)求祠挫，如果服務(wù)器響應(yīng)完全符合請(qǐng)求要求，瀏覽器則會(huì)發(fā)送真正的 post 請(qǐng)求典奉。
而當(dāng) headers 的 Content-Type 屬性是 application/x-www-form-urlencoded 時(shí)不會(huì)發(fā)送 options 請(qǐng)求，所以需要在 axios 請(qǐng)求攔截中配置 headers['Content-Type'] = 'application/x-www-form-urlencoded 丧叽。并將 post 的參數(shù)轉(zhuǎn)換為序列化的 URL 形式卫玖，具體設(shè)置如下：
// qs 庫，URL 參數(shù)與對(duì)象參數(shù)之間的互相轉(zhuǎn)換
// 這里只用到了 `stringify` 方法
import { stringify } from 'qs';
// 請(qǐng)求攔截
axiosService.interceptors.request.use(
(config) => {
// 兼容 post 跨域問題
if (config.method === 'post') {
// 修改 Content-Type
config.headers['Content-Type'] =
'application/x-www-form-urlencoded';
// 將對(duì)象參數(shù)轉(zhuǎn)換為序列化的 URL 形式（key=val&key=val）
config.data = stringify(config.data);
}
return config;
},
(error) => {
console.log(error);
return Promise.reject(error);
}
);
Content-Type參數(shù)配置只會(huì)出現(xiàn)在POST與PUT請(qǐng)求中踊淳。
qs.parse方法可以將 URL 參數(shù)解析成對(duì)象的形式假瞬。
