1

I am trying to call the Twitter API in a React App and get the following error:

Fetch API cannot load https://api.twitter.com/1.1/account/verify_credentials.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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Dixit Savaliya
  • 413
  • 3
  • 7

1 Answers1

0

This issue is usually caused by not using CORS on your server. If you are loading the data from the API onto your own server, make sure you use the CORS package and call the middleware in your app file so you can make requests from a different port.

If you are calling the API directly from your client, then the issue is a little deceptive. All browsers will have CORS enabled by default, so it won't be an issue of using CORS or not. Instead, you are likely receiving the data in the wrong format in your headers. You should be expecting application/json data, and you are probably not receiving it as JSON data, which will throw this error as well. Twitter's API may not return the expected data format, in which case you would need to create your own server so you can handle the data correctly, rather than calling it directly from the client.

Nick
  • 1,392
  • 1
  • 13
  • 20