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

Question

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

Fetch API cannot load https://api.twitter.com/1.1/account/verify_credentials.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 400. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我知道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

我必须创建一个节点服务器来调用 API，没什么大不了的

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

Can I call the Twitter API in client using Fetch?

javascript

twitter

twitter-oauth

reactjs

fetch-api