Axios and twitter API

Question

I'm having an issue with axios and twitter API.

I made successful request using Postman (with Authorization header set - OAuth 1.0). Now I'm trying to do the same and all I get is:

Failed to load https://api.twitter.com/1.1/lists/statuses.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.

I also see in the Network chrome tab, that only the OPTIONS is being sent.

This is how my axios configuration looks like (with changed credentials ;)):

const api = axios.create({
    baseURL: 'https://api.twitter.com/1.1',
    headers: {
      // Authorization was copied from the Postman headers
      Authorization: 'OAuth oauth_consumer_key="consumer_key",oauth_token="token",,oauth_signature_method="H,MAC-SHA1",,oauth_timestamp="1,515677408",,oauth_nonce="nonce",,oauth_version="1,.0",,oauth_signature="signature"',
    },
    withCredentials: true,
  });

  const getListStatuses = (owner_screen_name, slug) => {
    return api.get('/lists/statuses.json', { owner_screen_name, slug });
  };

What am I missing?

Answer 1

This is a CORS problem, a security measure adopted by browsers (which explains why you could do it via Postman).

Basically, Chrome sends the preflight request to the server to know what it is expecting, and the server isn't returning your origin as an acceptable one (Access-Control-Allow-Origin Header).

As @AndyPiper pointed out in the comments, Twitter's API does not support CORS. That means your request will only work if made from server-side, not from the browser.