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格式,需要进行数据转换,虽然有两种方式URLSearchParamsqs两种方式。我更喜欢使用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);
      });
    原文作者:Developer
    原文地址: https://segmentfault.com/a/1190000012659042
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞