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

Question

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

提取 API 无法加载 https://api.twitter.com/1.1/account/verify_credentials.json。响应 到预检请求未通过访问控制检查：否 "访问控制允许源"标头存在于请求的上 资源。因此不允许使用原产地"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(

Answer 1

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

的

Answer 2

我不知道 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]}"`,
}

}(;