axios請求JSON問題詳解

1. 當參數是JSON對象時，默認的Content-Type是application/json。

   axios.post('/user', {
       firstName: 'Fred',
       lastName: 'Flintstone'
     })
     .then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     });

   此時傳遞的參數是Request Payload格式{firstName:"Fred",lastName:"Flintstone"}

   若是出現 No 'Access-Control-Allow-Origin' header is present on the requested resource的錯誤，則是跨域問題。本人喜歡直接配置服務器來解決跨域：例如Nginx配置： Nginx配置跨域請求

2. 當參數是JSON字符串時，默認的Content-Type是application/x-www-form-urlencoded。

   axios.post('/user', JSON.stringify({
       firstName: 'Fred',
       lastName: 'Flintstone'
     }))
     .then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     });

   此時傳遞的參數是Form Data格式key : value：

   {"firstName":"Fred","lastName":"Flintstone"}:

   如上。其實這是一個無效的數據，key爲{"firstName":"Fred","lastName":"Flintstone"}，value爲空。

3. 要想使用application/x-www-form-urlencoded格式，須要進行數據轉換，雖然有兩種方式URLSearchParams和qs兩種方式。我更喜歡使用qs庫的方式，代碼以下：

   axios.interceptors.request.use((req) => {
       if (req.method === 'post') {
        req.data = qs.stringify(req.data);
       }
       return req;
   }, (error) => Promise.reject(error));

   以後使用axios的時候，只須要傳遞json對象就能夠：

   axios.post('/user', {
       firstName: 'Fred',
       lastName: 'Flintstone'
     })
     .then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     });