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

问题描述：

我试图调用一个阵营应用Twitter的API，并出现以下错误我可以使用Fetch在客户端调用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的所有步骤（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头......有各种各样的第三方工具/从客户端JS使用twitter API的“webify”方面的服务。 – dandavis

感谢您的信息，你知道一个好的工具吗？我做了一个快速的谷歌搜索，但似乎无法找到任何东西 – esausilva

作为一个很好的工具，可以尝试设置https://github.com/Rob--W/cors-anywhere/等实例，并查看如果你能以你需要的方式解决问题。有关更多详细信息，请参阅https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource/42744707#42744707 – sideshowbarker

答

我不得不创建一个节点服务器调用API，根本不算什么

答

我不知道用是否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 – esausilva

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

相关推荐