axios get请求如何设置Content-Type

编程知识 更新时间:2023-04-05 06:11:35

最近在工作中碰到一个问题,后端提供的get请求的接口需要在request header 设置Content-Type为 ‘application/json’,于是如下设置:

const http = axios.create({
  method,
  baseUrl,
  url,
  headers: {
    'Content-Type': 'application/json',
  },
  ...
})

然而实际使用中发现并没有成功在请求头里设置Content-Type,经过网上的资料查找发现是由于axios的源码出了问题,具体位置在 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);
        }
      });
    }

从中可以看出当未设置requestData的时候回删掉Content-Type的设置,其这么做的原因在于是Get请求本身是不需要Content-Type的。
具体解决方法如下:

const http = axios.create({
  method,
  baseUrl,
  url,
  headers: {
    'Content-Type': 'application/json',
  },
  ...
})

http.interceptors.request.use(config => {
  if (config.method === 'get') {
    //  给data赋值以绕过if判断
    config.data = true 
  }

  config.headers['Content-Type'] = 'application/json'
  return config
}, err => Promise.reject(err))

重新调用接口,ok大功告成

参考资料:
https://github/axios/axios/issues/362
https://blog.csdn/qq_24729895/article/details/80367460

更多推荐

axios get请求如何设置Content-Type

本文发布于:2023-04-05 06:11:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/51943a391d07fdaa5474d6ba46ac7512.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:如何设置   axios   Type   Content

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 45202文章数
  • 14阅读数
  • 0评论数