请求授权 header 未设置 - React/Axios

Question

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

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

GET 未设置 header

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 集 header

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 参数、查询参数、路径变量、请求正文等的位置。

请求授权 header 未设置 - React/Axios

Request Authorization header not set - React/Axios

axios

http-headers