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

【问题标题】：Can I call the Twitter API in client using Fetch?我可以使用 Fetch 在客户端调用 Twitter API 吗？
【发布时间】：2018-01-05 16:42:03
【问题描述】：

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

Fetch 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（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)

【问题讨论】：

我很确定您需要一个服务器，因为文档中没有 CORS 标头...有各种 3rd 方工具/服务可以“网络化”推特 API 的各个方面供使用来自客户端 JS。
感谢您的信息，您知道有什么好工具可以做到这一点吗？我做了一个快速的谷歌搜索，但似乎找不到任何东西
作为一个不错的工具，可以尝试设置github.com/Rob--W/cors-anywhere 之类的实例，看看是否可以按照您需要的方式解决问题。更多详情见stackoverflow.com/questions/20035101/…
查看stackoverflow.com/questions/35879943/… 并查看twittercommunity.com/t/… 的声明“典型模式是对Twitter API 的请求发生在后端，而不是直接从基于浏览器的应用程序中发生”。我想大多数人都会继续处理这个问题，要么通过将自定义处理写入他们的 Web 应用程序的服务器端代码，要么使用一些库来为他们正在使用的任何服务器端运行时执行此操作
我不确定通用 CORS 代理（例如 github.com/Rob--W/cors-anywhere/will）在浏览器被触发执行预检 OPTIONS 请求的情况下是否真的有帮助——这就是问题中发生的情况。在这种情况下，通用 CORS 代理可能无法解决任何问题的原因是，OPTIONS 请求需要在没有身份验证的情况下发生——因为浏览器会自行执行该 OPTIONS，并且不会从您的代码中发送 Authorization 标头+值。它。但是来自 Twitter 的 400 响应似乎表明他们需要对 OPTIONS 请求进行身份验证

标签： javascript reactjs twitter fetch twitter-oauth

【解决方案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]}"`,
}

});

【讨论】：

似乎不允许CORS
twitter api 不允许从客户端直接调用它的方法

【解决方案2】：

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

【讨论】：