近期,一些前端開發者反映使用axios發送POST請求時,不能成功提交JSON數據,特來發表一下看法和解決方法。
在使用axios發送POST請求時,代碼如下:
axios.post('/api/postdata', { name: 'Tom', age: 20 })
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
然而,運行以上代碼時便會發現,實際上提交上去的卻不是JSON格式的數據,而是類似于urlencoded的字符串。
造成這種情況的原因是axios在發送數據時,默認采用的Content-Type是application/x-www-form-urlencoded。因此,需要在請求頭中指定Content-Type為application/json。如下代碼:
axios.post('/api/postdata', { name: 'Tom', age: 20 },
{headers: {'Content-Type': 'application/json'}}
)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
以上代碼中,通過在axios.post的第三個參數中添加headers指定Content-Type為application/json,就能成功以JSON格式提交數據了。
當然,如果想要全局設置axios的Content-Type,可以在axios.defaults.headers.post中設置。如下代碼:
axios.defaults.headers.post['Content-Type'] = 'application/json';
總之,在使用axios發送POST請求時,一定要注意Content-Type的設置,否則可能會導致無法提交JSON格式的數據。
下一篇l query vue