解決使用axios發送json後臺接收不到的問題

問題描述

按照axios官網例子發起請求傳遞json，後臺接受到的數據爲空，一直卡在options階段。

嘗試的方法

開始以爲是接口有問題，使用postman測試下，一切正常，百思不得其解，看了好多issue也解決不了，加了headers:{'content-type':'application/json'}也沒用。

官網上是說，傳json就按application/json進行處理，然而並沒有卵用；之後套了一層JSON.stringify(data)，content-type又變成表單格式了==。

然後翻自己之前的代碼，發現寫法如出一轍，懷疑是版本號的問題，然而並不是==。。。。考慮到可能和服務端有關係。

原代碼如下：

import axios from 'axios';

export default function request(url, params) {
    return axios.post(`xxxxxx/${url}`, params)
        .then((response) => {
            console.log('response', response);
            return response;
        })
        .catch((error) => {
            console.log('error', error);
            return error;
        });
}

最後想想還是用fetch吧（確實用了，發現還是有這個問題，現在深度懷疑是服務端將參數類型卡的太死了，還有polyfill的問題就放棄了，如果有知道的小夥伴請留言告訴我，謝謝），實在不行就ajax（還要封裝成promise，哭）。出於對axios的堅持，終於找到了解決方法。

解決方法

就是添加qs庫，將json序列化之後傳遞，詳見這個issue。

代碼：

import axios from 'axios';
import qs from 'qs';

export default function request(url, params) {
    return axios.post(`https://xxxxxxxx/${url}`, qs.stringify(params))
        .then((response) => {
            console.log('response', response);
            return response;
        })
        .catch((error) => {
            console.log('error', error);
            return error;
        });
}