使用 axios POST 请求传递标头

小编典典

使用 axios POST 请求传递标头

all

我已经按照 npm 包文档的建议编写了一个 Axios POST 请求，例如：

var data = {
    'key1': 'val1',
    'key2': 'val2'
}
axios.post(Helper.getUserAPI(), data)       
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

它可以工作，但现在我已经修改了我的后端 API 以接受标头。

内容类型：’应用程序/json’

授权：’JWT fefege…’

现在，这个请求在 Postman 上运行良好，但是在编写 axios 调用时，我按照
这个链接 并不能完全让它工作。

我经常400 BAD Request出错。

这是我修改后的请求：

axios.post(Helper.getUserAPI(), {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...'
    },
    data
})      
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

阅读 132

2022-05-18

共1个答案

小编典典

使用 Axios 时，为了传递自定义标头，提供一个包含标头的对象作为最后一个参数

修改您的 Axios 请求，例如：

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), data, {
    headers: headers
  })
  .then((response) => {
    dispatch({
      type: FOUND_USER,
      data: response.data[0]
    })
  })
  .catch((error) => {
    dispatch({
      type: ERROR_FINDING_USER
    })
  })

2022-05-18