vue+axios post請求
vue+axios post請求
axios 全域性預設配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
預設情況下,axios將JavaScript物件序列化為JSON。 要以應用程式/ x-www-form-urlencoded格式傳送資料,您可以使用以下選項之一。
axios 傳送post請求
1. 瀏覽器
在瀏覽器中,您可以使用URLSearchParams API,如下所示:
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
注意: 所有瀏覽器都不支援URLSearchParams,但是有一個polyfill可用(確保polyfill全域性環境)。
polyfill就是一個用在瀏覽器API上的shim(是一個庫,它將一個新的API引入到一箇舊的環境中,而且僅靠舊環境中已有的手段實現).我們通常的做法是先檢查當前瀏覽器是否支援某個API,如果不支援的話就載入對應的polyfill.然後新舊瀏覽器就都可以使用這個API了。
axios 依賴本機要支援ES6 Promise實現。 如果您的環境不支援ES6 Promises,您可以使用polyfill。
或者,您可以使用qs外掛地址庫對資料進行編碼(將axios傳送的資料格式轉換為form-data格式):
//npm install axios的時候預設會安裝qs
// qs相關的問題請搜尋"nodejs qs"或者看這裡https://www.npmjs.com/package/qs
import qs from 'qs';
// 將請求資料轉換為form-data格式
// 這裡不用qs,用FormData也可以,不贅述
var data = qs.stringify({
currentPage: "0",
pageSize: "10",
type: "1",
});
axios.post('/url', data)
.then(function (response) {
})
.catch(function (error) {
});
2. Node.js
在node.js中,可以使用querystring模組(也可以使用qs庫。),如下所示:
var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });
axios cookie
用axios傳送post請求去登入,能成功返回資料,但是用作許可權驗證的cookie就是沒有儲存,經查閱,axios 預設不傳送cookie,跨域也是一個原因,需要全域性設定:文件地址
axios.defaults.withCredentials = true
axios跨域問題
Vue-cli proxyTable 解決開發環境的跨域問題
在vue-cli的config檔案index.js裡有一個引數叫proxyTable
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/list': '/list'
}
}
}
changeOrigin引數接收一個布林值,如果設定為true,那麼本地會虛擬一個服務端接收你的請求並代你傳送該請求,這樣就不會有跨域問題了,當然這隻適用於開發環境。
相關資料:
API proxy
http-proxy-middleware
package