Вход в Twitter с ошибкой типа React: не удалось выполнить выборку

#reactjs #twitter-oauth

#reactjs #twitter-oauth

Вопрос:

Я запускаю проект React на localhost: 3000. Я пытаюсь войти в систему с помощью Twitter, используя React.

 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"
/>
 

Когда я нажал на значок входа в Twitter. Я продолжаю получать сообщение об ошибке «TypeError: не удалось выполнить выборку»

И для консоли я получаю следующую ошибку:

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

Я также не понимаю, что я должен указать для URL-адреса веб-сайта и URL-адреса обратного вызова для настроек разработчика Twitter. Пожалуйста, помогите. Большое спасибо!

Комментарии:

1. Какая служба работает на localhost: 4000 (?)

2. Я не знаю, я просто следовал этому руководству, и у меня это не сработало. medium.com/@robince885 /…

Ответ №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"
/>
 

Комментарии:

1. у меня тоже такая же ошибка, но это не работает: (

Ответ №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"
/>
 

Не используйте localhost, так как вы можете получить ошибки cors. Смотрите Документацию для cors.

Комментарии:

1. Здравствуйте, я изменил его, и я получаю другую ошибку » SyntaxError: неожиданный токен < в JSON в позиции 0″

2. можете ли вы создать изолированную среду

Ответ №3:

Попробуйте другой пакет react-twitter-login

Эта реализация не использовала никакой серверной части и создана для простого OAuth с Twitter:

 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}
    />
  );
};