CORS Error

[benjamin852]

Describe the bug
I am following the docs step by step and just trying to use the sample query which is laid out with the docs but I am receiving a CORS error on my query.

Hope someone can point me in the right direction as to what I am doing wrong.

To reproduce
I have a plain .js file which I was hoping to use in my utils and in here I have the code from the docs

import { TwitterClient } from 'twitter-api-client';

const twitterClient = new TwitterClient({
  apiKey: process.env.TWITTER_API_KEY,
  apiSecret: process.env.TWITTER_API_SECRET,
  accessToken: process.env.TWITTER_ACCESS_TOKEN,
  accessTokenSecret: process.env.TWITTER_ACCESS_TOKEN_SECRET,
});

// Search for a user
export const getUseData = async () => {
  const data = await twitterClient.accountsAndUsers.usersSearch({ q: 'twitterDev' });
  console.log(data);
};

I then reference the exported function in my React page's useEffect hook

useEffect(() => {
    getUseData();
  }, []);

and then when the function is triggered i get the scary cors error which says:

http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Expected behavior
I was hoping to see the data logged out not sure why it's being blocked by CORS. Do i need to make these API calls from some sort of a server repo and then pass it to my frontend repo? Or is there anyway I can get it on my client side.

Package Manager:
To install Twitter API Client, I used... (npm / yarn / something else) npm

Additional context
Add any other context about the problem here.

Thanks Everyone.

[rishimohan]

@benjamin852 This is because Twitter API doesn't support CORS, in short Twitter doesn't allow requests made from browser. You'll have to setup a server to make requests, which is what I'm currently trying to figure out too.

[SimonHoiberg]

Yes, as @rishimohan mentions: You cannot make requests to the Twitter API directly from the browser. You will need to set up a NodeJS server or a lambda that can proxy the requests for you, and this server will be using the twitter-api-client.

Alternatively, you can look into using a CORS Proxy. There are some free ones available, although, I wouldn't particularly recommend it.

But check out this site: https://nordicapis.com/10-free-to-use-cors-proxies/

I'm closing this issue again 😊 Cheers.

[publikphigor]

I am facing this issue at the moment too. I already built the front-end of my app and setup this library already only for me to get the CORS error.

I need some help editing the URL the request is made with so I can prefix the proxy (not sure this is how it works).