通过 Javascript (React.js) 使用用户令牌进行 API 调用（获取）答案

【问题标题】：API call (fetch) with user token through Javascript (React.js)通过 Javascript (React.js) 使用用户令牌进行 API 调用（获取）
【发布时间】：2021-08-21 02:49:05
【问题描述】：

你们还好吗？

我正在尝试从网站 X（启用了 cors）获取数据（在 React 中），但首先需要从网站 Y 获取用户令牌，但我不知道如何解决这个问题.不知何故，我认为我必须从 Y 获取用户令牌，将其保存在变量中并将其作为标题添加到另一个调用中，但我有点迷失了 GET/POST 方法。

到目前为止，我所拥有的是这个，但不知何故不起作用，我认为我没有正确发送头部或正确地进行实际调用：

getToken(){
  const url = 'websiteOfTheToken';
  const response = await fetch(url);
  const data = await response.json();
  this.setState({
    userToken: data.image
  });
}

还有：

getData(){
 const response = await fetch('websiteOfTheData', {
    method: 'POST', 
    mode: 'no-cors', 
    cache: 'no-cache', 
    credentials: 'same-origin',
    headers: {
      'accept': 'application/json',
      'Content-Type': 'application/json'
    },
    redirect: 'follow', 
    referrerPolicy: 'no-referrer',
    body: JSON.stringify({
      title: '' // I don't know what is this doing
    }) 
    }).catch( error => {
    console.log('Error fetching and parsing data ', error)
    });

  this.setState({
    data: response.json()
  });
}

提前谢谢你！！

【问题讨论】：

仅供参考 await 在同步函数中无效。您能否提供一个“工作”示例，在该示例中调用第一次提取并尝试在第二次提取中使用保存的令牌？

标签： javascript reactjs api fetch

【解决方案1】：

我想说/想问的几件事：

通常您会在成功登录后获得令牌，因此对令牌的标准请求将是包含用户数据的发布请求。
JavaScript 中的 await 仅在 async 函数中有效，请阅读相关内容。
处理 api 响应 (Promise) 的最常见做法是使用 then-catch 块，了解一下。
您需要附加到请求的典型 JWT 标头如下所示："Authorization": "Bearer theactualtoken1234"。
fetch 发布请求的body 是您发送到服务器的实际数据。所以它的内容完全是任意的——我也不知道这个"title": "" 在做什么......

【讨论】：