Axios踩坑记

最近在自学前端 组件和路由部分看了七七八八 elementUI也大概知道了什么风格 想着该试试前后端通讯了  于是后端springboot启了一个查询服务 设好了跨域允许  前端首先试着用原生aax代码访问后端 代码如下

var request = new XMLHttpRequest();

request.open("GET", "XXX");

request.setRequestHeader("Content-Type", "application/json");

request.onreadystatechange = function() {

     if(this.readyState === 4 && this.status === 200) {

        alert(this.responseText);

     }

};

request.send();

运行 OK 数据正常返回 说明后端服务没问题

接下来改成如下Axios方式发送请求:

this.$axios.get('XXX',{

            headers: {

              'Content-Type': 'application/json',

            }

          }).then(function (response) {

              alert(response.data);

     })

    .catch(function (error) {

              alert(error);

      });

于是重点来了 无论怎么改代码 发现就是报415错误 数据类型不匹配  于是不得不打开开发者工具

查看network下的请求详情 一看发现请求header里压根就没有context-type这项  说明代码中设置

的 'Content-Type': 'application/json'压根没生效 为了试试其他header是否生效  于是添加了几个

自定义的header 发现都正常  就只有Content-Type添加不上  于是醉了 

找到网上的解决方案 axios判断必须有数据才可以 否则就把context-type屏蔽 需要在axios拦截器

里自行处理 如下：

axios.interceptors.request.use(

  config => {

      if (config.method === 'get' && !config.data) {

          config.data = true

      }

      if (!config.headers['Content-Type']) {

          config.headers['Content-Type'] = 'application/json';

      }

      return config;

  },

  error => {

      return Promise.reject(error)

  }

)

处理起来并不难  费解的是axios为什么要这么搞  这不是误人子弟吗