使用 React TypeError 登录 Twitter:无法获取

Question

我在localhost：3000上运行React项目。我正在尝试使用 React 登录 Twitter。

URL:  http://localhost:3000/login/
<TwitterLogin
    loginUrl="http://localhost:4000/api/v1/auth/twitter"
    onFailure={this.onFailed}
    onSuccess={this.onSuccess}
    requestTokenUrl="http://localhost:4000/api/v1/auth/twitter/reverse"
/>

当我点击推特登录图标时。我不断收到错误"类型错误：无法获取">

对于控制台，我收到以下错误：

OPTIONS http://localhost:4000/api/v1/auth/twitter net::ERR_CONNECTION_REFUSED

我也对应该为网站 URL 和 Twitter 开发者设置的回调 URL 放置什么感到困惑。请帮忙。多谢！

Answer 1

引用他们的文档

<TwitterLogin
    //localhost:4000 endpoint should be your api running url
    loginUrl="http://localhost:4000/api/v1/auth/twitter"
    onFailure={this.onFailed}
    onSuccess={this.onSuccess}
    //your api endpoint
    requestTokenUrl="http://localhost:4000/api/v1/auth/twitter/reverse"
/>

Answer 2

<TwitterLogin
    loginUrl="http://<API-endpoint>/api/v1/auth/twitter"
    onFailure={this.onFailed}
    onSuccess={this.onSuccess}
    //your api endpoint
    requestTokenUrl="http://<API-endpoint>/api/v1/auth/twitter/reverse"
/>

不要使用本地主机，因为您可能会收到 cors 错误。请参阅有关 cors 的文档。

Answer 3

尝试其他软件包react-twitter-login

此实现未使用任何后端，而是通过Twitter为简单的OAuth创建：

import React from "react";
import TwitterLogin from "react-twitter-login";
export default props => {
  const authHandler = (err, data) => {
    console.log(err, data);
  };
  return (
    <TwitterLogin
      authCallback={authHandler}
      consumerKey={CONSUMER_KEY}
      consumerSecret={CONSUMER_SECRET}
      callbackUrl={CALLBACK_URL}
    />
  );
};