我正在尝试在 React 应用程序中调用 Twitter API 并收到以下错误
I am trying to call the Twitter API in a React App and get the following error
Fetch API 无法加载https://api.twitter.com/1.1/account/verify_credentials.json.回复预检请求未通过访问控制检查:否请求中存在Access-Control-Allow-Origin"标头资源.因此,来源 'http://localhost:3000' 是不允许的使用权.响应的 HTTP 状态代码为 400.如果响应不透明满足您的需求,将请求的模式设置为no-cors"以获取禁用 CORS 的资源.
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 的所有步骤(授权请求,创建签名)但也许我忽略了我的代码中的某些内容.
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.
此外,我在 API 文档中没有找到任何内容说我必须使用服务器来调用他们的 API,但也许我错过了一些东西.
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.
下面是获取用户信息的函数字面量fetchUser
.
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;
}
看看我正在使用的整个代码(CodePen)
我必须创建一个 Node 服务器来调用 API,没什么大不了的
I had to create a Node server to call the API, no biggie
这篇关于我可以使用 Fetch 在客户端调用 Twitter API 吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!