400 CORS Error when using library from the client

[draftbit]

400 CORS Error when using library from the client

[DanceParty]

Okay, didn't know if it was on my end. I can possibly look into contributing some tests this weekend!

[dandv]

twitter-lite makes it easier to pass parameters than having to shove them into URLs :)

Check the example for user_timeline.

[DanceParty]

Thank you for the quick reply, but the error still stands, I don't think it is related to how I am passing the variables in...?

[dandv]

We should create some tests for the client, @peterpme.

[mbdilaver]

Thank you for the quick reply, but the error still stands, I don't think it is related to how I am passing the variables in...?

You have to use a CORS proxy (like https://cors-anywhere.herokuapp.com/). Change your subdomain like below. There are also other CORS services that you can use or you can setup your own. Don't use these public proxy services for production.
After changing the subdomain like this, the CORS error no longer appears but I get 401 error for my GET and POST requests. I couldn't figure out what's the problem. At least you can give it a shot.

const client = new Twitter({
    subdomain: "cors-anywhere.herokuapp.com/https://api",
    consumer_key: X,
    consumer_secret: X,
    access_token_key: X,
    access_token_secret: X,
});

[DanceParty]

@mbdilaver So maybe for production creating my own backend as a simple data pass through may be the best way for now?

[mbdilaver]

@KeevanDance Yeah that looks like the ideal solution. (https://developer.mozilla.org/tr/docs/Web/HTTP/CORS)

[DanceParty]

@mbdilaver Thanks, I appreciate the quick response :)

[waleedshkt]

@DanceParty, Check out this solution.

The reason behind CORS error as I've recently found out is the absence of Access-Control-Allow-Origin in the request header which browser doesn't send. This is actually a good requirement by twitter because it encourages the devs to use server-side as opposed to browser which can adds a cyber security risk of leaking twitter app api keys form bad hands.

You can use the above solution for the development mode. But for production, if you are creating static site hosted on Netlify, Firebase, Heroku, for example, you can use their in-built proxy feature. This means then when making such twitter requests from your custom domain, it'll not encounter preflight CORS issue.

Hope this slightly long comment helps out.

[MauriceOppenberger]

Thank you for the quick reply, but the error still stands, I don't think it is related to how I am passing the variables in...?

You have to use a CORS proxy (like https://cors-anywhere.herokuapp.com/). Change your subdomain like below. There are also other CORS services that you can use or you can setup your own. Don't use these public proxy services for production.
After changing the subdomain like this, the CORS error no longer appears but I get 401 error for my GET and POST requests. I couldn't figure out what's the problem. At least you can give it a shot.

const client = new Twitter({
    subdomain: "cors-anywhere.herokuapp.com/https://api",
    consumer_key: X,
    consumer_secret: X,
    access_token_key: X,
    access_token_secret: X,
});

@mbdilaveany, were you able to figure out what causes the 401 error?

[acailly]

I think I found the origin of the 401 error.

This lib delegate authentication header generation to oauth-1.0a dependency (https://github.com/ddo/oauth-1.0a) when it uses Twitter OAuth 1.0a authentication method (https://developer.twitter.com/en/docs/authentication/oauth-1-0a)

Authentication header should be computed with the endpoint URL without the proxy, but when you pass the subdomain containing the CORS proxy, it is used everywhere, event for this authentication header generation.

I found this workaround:

  // In browser, use a CORS proxy
  // From https://github.com/draftbit/twitter-lite/issues/41#issuecomment-467403918
  const subdomain = isBrowser
    ? `${configuration.corsProxyURL.slice("https://".length)}https://api`
    : "api";

  const client = new Twitter({
    subdomain,
    version: "1.1",
    consumer_key: consumerKey,
    consumer_secret: consumerSecret,
    access_token_key: accessTokenKey,
    access_token_secret: accessTokenSecret,
  });

  // Monkey patch oauth client used by twitter-lite in order to
  // ignore cors proxy url when generating authentication headers
  const originalAuthorizeFunction = client.client.authorize;
  client.client.authorize = function (request, token) {
    let requestWihoutCorsProxy = request;
    if (request.url.startsWith(configuration.corsProxyURL)) {
      const requestUrlNotProxyfied = request.url.slice(
        configuration.corsProxyURL.length
      );
      requestWihoutCorsProxy = { ...request, url: requestUrlNotProxyfied };
    }
    return originalAuthorizeFunction.call(
      client.client,
      requestWihoutCorsProxy,
      token
    );
  };