ReactJS：Axios 获取带有标头和数据的请求导致错误请求 400答案

【问题标题】：ReactJS : Axios get request with header and data leads to bad request 400ReactJS：Axios 获取带有标头和数据的请求导致错误请求 400
【发布时间】：2020-07-10 02:31:48
【问题描述】：

我有一个在 localhost 上运行的 Spring 应用程序，它有一个端点。这是一个 get api，需要一个带有承载 jwt 和用户名的授权标头来获取一些数据。

当我尝试使用邮递员到达这个端点时，它工作正常。

但是使用 axios，我收到了 400 错误请求。

这是我提出请求的方式。

const jwt = "jwt";
const api = "http://localhost:7000/api";
const response = await axios.get(api, {
    params: { username: username },
    headers: {
      Authorization: `Bearer ${jwt}`,
      "Content-Type": "application/json",
    },
  });

我参考了下面链接上的第一个答案来提出这种方法。

Use Axios.Get with params and config together

我的 spring 应用程序现在支持 CrossOrigin 请求，所以这应该不是问题。

如果没有配置中的 params / data，相同的请求也可以正常工作。

如有任何帮助，我们将不胜感激。

【问题讨论】：

标签： reactjs spring get axios

【解决方案1】：

你试过 {"...api?username="+username} 吗？另外，试试这个配置：{withCredentials: true}。

【讨论】：

【解决方案2】：

我注意到在您共享的代码中，kwt 令牌实际上是一个值为 jwt 的字符串，我不确定这是否是用于您 API 的令牌，但似乎不是，因为您重新获得400，如果不是这个，我建议您更新获取正确令牌的逻辑。

const jwt = "jwt" //replace with correct token;

【讨论】：