Axios的get请求错误复盘

在使用axios请求对接后台接口时，发现出现415的错误。情形如下

此时，我将同样的接口复制到postman中进行复测，发现postman能够请求到数据。经过一番对比，发现是postman对请求添加了请求头Content-Type:'application/json;'这是导致请求失败的原因。

正常情况下，get请求属于简单请求，一般可以不带参数去请求，由于后台的接口复用限制，以至于他们的get请求都需要请求头加上content-type。

此时我尝试着在我的请求中加上

headers:{
    "Content-Type":"application/json"
}

但是问题依然没有解决，仍然给我报415错误。

追根溯源，我查看了axios的源码 在它的lib/adapters/xhr.js中发现这样一段代码：

 // Add headers to the request
    if ('setRequestHeader' in request) {
      utils.forEach(requestHeaders, function setRequestHeader(val, key) {
        if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
          // Remove Content-Type if data is undefined
          delete requestHeaders[key];
        } else {
          // Otherwise add header to the request
          request.setRequestHeader(key, val);
        }
      });
    }

这样，问题的原因就找到了

在axios的get请求中，如果请求没有参数的话，他的源码中会自动将你的请求头给去掉。

解决方案

既然问题已经找到了，想解决它就很容易。

第一种解决方案：

直接将这个判断给注释掉。但这种方法多少有点欠妥，如果安装包有更新的话，你的源码的注释操作就会失效，导致接口再次请求失败。不太建议，这种方法可以帮你调试接口 看看是否是这个问题导致的错误。

第二种解决方案：

绕过他的这个if即可。

我的做法就是给请求赋一个空对象

getssdesign({}).then(res => {
   console.log(res);
})

这样就获得了请求结果，问题解决。

这样的解决方案属于取巧了，如果不放心，也可以在请求中配置一个拦截器，修改请求，本质上是一样的。