我可以使用Fetch在客户端中调用Twitter API吗? [英] Can I call the Twitter API in client using Fetch?

问题描述

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

获取API无法加载 https://api.twitter.com/1.1/account/verify_credentials.json.回复 进行预检请求未通过访问控制检查:否 请求中存在"Access-Control-Allow-Origin"标头 资源.因此，不允许使用来源" http://localhost:3000 " 使用权.响应的HTTP状态码为400.如果响应不透明 满足您的需求，将请求的模式设置为"no-cors"以获取 禁用了CORS的资源.

我知道Access-Control-Allow-Origin是什么意思.我认为我按照Twitter API的所有步骤进行操作(对请求进行授权， 创建签名)，但也许我忽略了代码中的某些内容.

我在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;
}

看看我正在使用的整个代码(CodePen)

解决方案

我不得不创建一个Node服务器来调用API，没什么大不了的

I am trying to call the Twitter API in a React App and get the following error

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.

I know what Access-Control-Allow-Origin means. I think I followed all the steps per the Twitter API (Authorizing a request, Creating a signature) but maybe I am overlooking something in my code.

Also I did not find anything in the API docs that say I have to use a server to call their API, but maybe I missed something.

Below is the function literal fetchUser that gets the user information.

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)

解决方案

I had to create a Node server to call the API, no biggie

这篇关于我可以使用Fetch在客户端中调用Twitter API吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！