未设置请求授权标头 - React/Axios

Question

我有 jwt 用户身份验证令牌，我正在尝试为 Axios GET 请求的 Authorization 标头设置。但它没有设置。后端显示未定义，firefox 开发工具未显示为 HTTP 请求设置的任何授权标头。相同的令牌和相同的辅助函数设置 POST 请求的标头，后端正确读取。

const setAuthHeader = user => {
  return { headers: { Authorization: `Bearer ${user.token}` } }
}

GET 没有设置标题

export const getWeights = async user => {
  try {
    const resp = await axios.get(
      baseUrl,
      { userId: user.id },
      setAuthHeader(user)
    )
    return resp.data
  } catch (error) {
    console.log(`error`, error)
  }
}

POST 设置标题

export const postWeights = async (user, weight, date) => {
  try {
    const resp = await axios.post(
      baseUrl,
      { userId: user.id, weight, date },
      setAuthHeader(user)
    )
    return resp.data
  } catch (error) {
    console.log(`error`, error)
  }
}

Answer 1

axios POST 和GET 有不同的方法signatures。

axios.post(url[,data[, config]])

axios.get(url[,config])

因此，如果您将 GET 方法重写为以下内容

export const getWeights = async user => {
  try {
    const resp = await axios.get(
      baseUrl,
      setAuthHeader(user)
    )
    return resp.data
  } catch (error) {
    console.log(`error`, error)
  }
}

它将解决问题。此外，如果您需要传递{ userId: user.id }，您可以使用类似这样的方法

export const getWeights = async user => {
  try {
    const resp = await axios.get(
      baseUrl,
      { params: { userId: user.id }, headers: { Authorization: `Bearer ${user.token}` }  }
    )
    return resp.data
  } catch (error) {
    console.log(`error`, error)
  }
}

这将产生一个带有查询参数的请求：http://example.com?userId=xxx。

这可能是您需要的，也可能不是，如果不查看 API，我无法判断。这取决于 API 期望在何处接收 userId 参数、查询参数、路径变量、请求正文等。