在前端開發過程中,我們常常會使用axios來進行數據請求。而在一些跨域的場景下,使用axios進行post提交json數據的時候,會出現一些問題。本文將介紹使用axios進行post提交json跨域時的解決方案。
在進行post提交json跨域前,需要先了解一下如何使用axios進行post請求。代碼如下:
axios.post('/api', {
data: {
key: value
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
其中,/api
為請求地址,data
為傳遞數據對象,then()
為成功回調函數,catch()
為錯誤回調函數。
在跨域的情況下,需要在請求頭中添加一些參數,以解決跨域問題。具體代碼如下:
axios({
method: 'post',
url: '/api',
data: {
key: value
},
headers: {
'Content-Type':'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With',
'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS'
}
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
其中,'Content-Type':'application/json;charset=UTF-8'
用于指定請求傳輸的數據類型為json,'Access-Control-Allow-Origin': '*'
表示允許跨域請求,'Access-Control-Allow-Headers'
表示允許傳遞的額外參數,'Access-Control-Allow-Methods'
表示允許的請求方法。添加這些請求頭參數之后,即可正常進行post提交json跨域請求。
總結一下,使用axios進行post提交json跨域請求需要添加請求頭參數,其中包括數據類型、跨域請求允許參數、允許的請求方法等。通過這些參數的設置,即可解決跨域問題,實現正常的json數據提交。