Question

我试图在React App中调用Twitter API并收到以下错误

无法加载Fetch API https://api.twitter.com/1.1/account/verify_credentials.json。响应预检请求没有通过访问控制检查：否＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost:3000＆＃39;因此是不允许的访问。响应的HTTP状态代码为400.如果是不透明的响应满足您的需求，将请求模式设置为“无人”状态。去取 CORS禁用的资源。

我知道Access-Control-Allow-Origin的含义。我想我按照Twitter API（Authorizing a request，Creating a signature）执行了所有步骤，但也许我在代码中忽略了一些内容。

此外，我在API文档中没有找到任何说我必须使用服务器调用其API的内容，但也许我错过了一些内容。

以下是获取用户信息的函数文字fetchUser。

export const fetchUser = async () => {
  const oauths = {...OAUTHS, oauth_nonce: generateNonce(), oauth_timestamp: Math.floor(Date.now() / 1000)};
  const oauthKeys = Object.keys(oauths);
  const oauthValues = Object.values(oauths);
  const baseUrl = `${ROOT_API_URL}verify_credentials.json`;
  const signature = generateOauthSignature(
    oauths,
    HTTP_GET,
    baseUrl,
    CONSUMER_SECRET,
    OAUTH_SECRET
  );

  const response = await fetch(baseUrl, {
    method: `${HTTP_GET}`,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': `OAuth ${oauthKeys[0]}="${oauthValues[0]}",${oauthKeys[1]}="${oauthValues[1]}",oauth_signature="${signature}",${oauthKeys[2]}="${oauthValues[2]}",${oauthKeys[3]}="${oauthValues[3]}",${oauthKeys[4]}="${oauthValues[4]}",${oauthKeys[5]}="${oauthValues[5]}"`,
    }
  });
  const body = await response.json();

  if (response.status !== 200) 
    throw Error(body.message);

  return body;
}

Take a look at the entire code I am using (CodePen)

Answer 1

我不知道Twitter API是否允许使用CORS，但如果确实如此，请在您的请求中指定cors模式应该这样做

const response = await fetch(baseUrl, {
  method: `${HTTP_GET}`,
  mode: 'cors',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': `OAuth ${oauthKeys[0]}="${oauthValues[0]}",${oauthKeys[1]}="${oauthValues[1]}",oauth_signature="${signature}",${oauthKeys[2]}="${oauthValues[2]}",${oauthKeys[3]}="${oauthValues[3]}",${oauthKeys[4]}="${oauthValues[4]}",${oauthKeys[5]}="${oauthValues[5]}"`,
}

}）;

Answer 2

我必须创建一个Node服务器来调用API，没有大问题

我可以使用Fetch在客户端中调用Twitter API吗？

2 个答案: