Axios 发送错误的令牌答案

【问题标题】：Axios is sending the wrong tokenAxios 发送错误的令牌
【发布时间】：2020-11-20 11:34:25
【问题描述】：

在 React 中，这是有效的：

let token = localStorage.getItem("token");

axios
      .post(
        `http://localhost/api`,
        (data: data),
        {
          crossdomain: true,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
            Accept: "application/json",
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "POST",
            "Access-Control-Allow-Headers": "Content-Type, Authorization",
            "Access-Control-Allow-Credentials": "true"
          },
        }
      )

一切正常。它带来了成功。

但在 React Native (AsyncStorage) 中，它给出了错误的令牌错误 (403)：

let token = AsyncStorage.getItem("token");

    axios
          .post(
            `http://localhost/api`,
            (data: data),
            {
              crossdomain: true,
            },
            {
              headers: {
                Authorization: `Bearer ${token}`,
                Accept: "application/json",
                "Content-Type": "application/json",
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Methods": "POST",
                "Access-Control-Allow-Headers": "Content-Type, Authorization",
                "Access-Control-Allow-Credentials": "true"
              },
            }
          )

在 console.log(token) 中，一切看起来都很棒。我可以看到我的令牌。它也适用于 Postman。

【问题讨论】：

标签： reactjs react-native axios local-storage asyncstorage

【解决方案1】：

根据docs：

返回：

Promise 使用字符串值解析，如果给定key 存在条目，或null 否则。

Promise 也可以在底层存储错误的情况下被拒绝。

由于它返回Promise，你应该使用.then() 或async/await 获取令牌：

async function doRequest() {
  let token = await AsyncStorage.getItem("token");
  // do request
}

【讨论】：

您的代码没问题，现在我正在获取令牌，但 axios 无法再次工作。数据类型有问题吗？还是世博会失败？ @Rafael
它会抛出错误吗？你能试试axios.post('http://localhost/api', data, { headers: { Authorization: 'Bearer '+ token } }); 看看它是否有效吗？我只是因为这里的代码格式而删除了反引号
嗨@Rafael，此代码也不起作用。它只是抛出Request failed with status code 403
@NightFighter 你确定你发送的正文数据（data）正确吗？正如您在问题中发布的那样，(data: data) 不起作用，但正如我在评论中所做的那样，如果格式正确，它应该可以工作。你能检查一下你在服务器上收到了什么吗？
我body的数据类型是字符串。此数据类型是否正确或我应该更改它？服务器给出"POST /api HTTP/1.1" 403 42 "-" "okhttp/3.12.1"。 Postman 也能正常工作。

【解决方案2】：

我想知道将来谁看到这篇文章，Axios 没有在 React-Native 中发送我的标头。在这种情况下，也许你应该尝试 fetch。

@Rafael 的回答也很棒。

fetch("http://localhost/api", {
      method: "post",
      headers: new Headers({
        "x-auth-token": `${token}`,
        "Content-Type": "application/json",
      }),
      body: {
        body
      },
    });

【讨论】：