Help with Twitter API when using localhost:3000

Curriculum Help JavaScript
#1

Hi Everyone,

I’m using the node-twitter package - https://www.npmjs.com/package/twitter and using React.

However I am getting an error in my console when making the GET request.

Is there any easy way to access the twitter API when using local host during development? I am only doing front end work at the moment.

Error:

Failed to load https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=nimaiwalsh: 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.

my React component:

import React, { Component } from 'react';
const Twitter = require('twitter');
const client = new Twitter({
  consumer_key: 'xxxxxxx',
  consumer_secret: 'xxxxxxxx',
  access_token_key: 'xxxxxxx',
  access_token_secret: 'xxxxxxxx',
})

class TwitterFeed extends Component {
  componentDidMount() {
    const params = {screen_name: 'nimaiwalsh'};
    client.get('statuses/user_timeline', params, function(error, tweets, response) {
      if (!error) {
          console.log(tweets);
      } else {
          throw error
      }
    });
  }

  render() {
    return(
      <div>Test twitter feed</div>
    )
  }
}

export default TwitterFeed

Thanks in advance

#2

What you’re doing is trying to use the user based authentication in your front end code. You’ll want to use the application-only request as documented here. The pattern you’re using there is for server-side logins.

#3

@PortableStick - Thanks heaps :slight_smile: This now makes a lot more sense.

#4

I managed to retreive my bearer_token from my CLI using node, and have embedded the bearer token in my app, however I am still receiving the

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. errors.

Here is my code:


import React, { Component } from 'react';
const TWITTER_BEARER_TOKEN = 'AAAAAAAAAAAAAAAAAAAAAG9p3gAAAAAAK86PnIdiZcbh4ITEFG1FiKI1fxA%3DO4IScQEnyl4KXa1JfbIXwKevpJFBkoEe6Zq7XKAOH2E7sis9Ui';

class TwitterFeed extends Component {
  componentDidMount() {
    const request = require("request");
    const twitter_api = 'https://api.twitter.com/1.1/statuses/user_timeline.json';
    const bearer_token = TWITTER_BEARER_TOKEN;
    var options = {
        method: 'GET',
        url: twitter_api,
        qs: {
            "screen_name": "nimaiwalsh"
        },
        json: true,
        headers: {
            "Authorization": "Bearer " + bearer_token
        }
    };

    request(options, function(error, response, body) {
      console.dir(body);
    });
  }

  render() {
    return(
      <div>PLACEHOLDER</div>
    )
  }
}

export default TwitterFeed
#5

In your Twitter app’s details page, have you set the callback url to localhost?

#6

@PortableStick, no I haven’t - should I try setting it to http://localhost:3000/ ?

#7

Install cross-origin add-on to your broser

#8

@Nims, did you figure this out?

#9

Hey,did U solve this? I am trying to do a similar thing in a Vue app but always get back

{
    "errors": [
        {
            "code": 215,
            "message": "Bad Authentication data."
        }
    ]
}
#10

Got the same problem, this does not solve it for me.

#11

Calling twitter API from the front end is not a normal practice because you need to expose your secret credentials, twitter dont send the Access-Control-Allow-Origin in their response headers so a solution could be disabling the browser security, in chrome for linux is done opening chrome from terminal with a flag and passing a directory wich chrome session will use to store data.
google-chrome-stable --disable-web-security --user-data-dir=data