1. 程式人生 > >vue+axios post請求

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