未使用 inceptor 在 Axios 实例中正确添加授权标头

Question

我正在尝试进行授权的 Get API 调用（使用 JWT 令牌）。我创建了一个单独的 Axios 实例，并尝试使用 Axios 拦截器附加授权令牌。我在尝试使用 Postman 和相同的令牌时得到状态 200，但在进行 API 调用时得到状态 403（禁止）。

我的 Axios 实现是：

let Authinstance = axios.create({
    baseURL: SERVER_URL + '/api',
    headers:{
        'Access-Control-Allow-Origin': '*',
        'Content-Type':'application/json; charset=utf-8'
    }
})

Authinstance.interceptors.request.use( config => {
    const token = Auth().getToken();
    config.headers['Authorization'] =  `Bearer ${token}`;
    return config;
})

export const getPayees = async() => {
    const username = Auth().getUser();
    const res = await Authinstance.get(`/netbanking/beneficiary/${username}`)

    return res.data
}

函数

Auth().getToken()

只是从 sessionStorage 获取并返回令牌。 正如您在给定图像中看到的，我从服务器获取 403 状态。

我的直觉是我在 Axios 的实现中做错了一些事情，因为我不熟悉 Axios 的代码流程。请帮忙。

Answer 1

屏幕显示选项请求，您可以尝试为第二个请求放置屏幕。但你能尝试这样做吗：

const authHeader = () => {
  Axios.interceptors.request.use(
      config => {
         const token = Auth().getToken();
        config.headers['Authorization'] =  `Bearer ${token}`;
        config.headers["Access-Control-Allow-Origin"] = "*";
        config.headers["Content-Type"] = "application/json; charset=utf-8";
        return config;
      },
      err => {
          return Promise.reject(err);
      }
  );
}

您的实施将是：

let Authinstance = axios.create({
    baseURL: SERVER_URL + '/api',
    headers: authHeader(),
})

// ----- authHeader ------

export const getPayees = async() => {
    const username = Auth().getUser();
    const res = await Authinstance.get(`/netbanking/beneficiary/${username}`)
    return res.data
}

让我知道它是否有效。