I'm making app by using react which is gonna catch data from twitter API

that's my code

import {useEffect, useState, useContext} from 'react'
import {Link, useParams, useNavigate, useLocation} from 'react-router-dom'



export default function Home(){

    const [content, setContent] = useState();

    const token = 'here is the required token but i cant show you that'
    
    useEffect(() => {
        const url = 'https://api.twitter.com/1.1/search/tweets.json?q=something';
        fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                Authorization: `Bearer ${token}`,
            }
        })

        .then((response) => {
            if(response.status === 404){
                console.log('404');
            }
            else{
                console.log(response.status)
                console.log('3')
            }
        })

        .then((data) => {

            console.log("abba")
            console.log(data)
            setContent(data)
        })

        

        .catch((e) => {
            console.log(e.message);
        })

    }, [])

    return(<div>{content}</div>)

}

and i'm getting this type of error

Access to fetch at 'https://api.twitter.com/1.1/search/tweets.json?q=ewron' from origin 'http://localhost:3000' has been blocked by CORS policy:

When I'm catching data by using the same token by using postman everything works fine

I tried to find solution but everyone is refering to backend set on the same machine. How can I solve it in my case ?

CodePudding user response：

A CORS policy is an important feature that prevents other, external websites from accessing an API.

Some APIs have CORS enabled, others have it disabled. And the whitelist will be tailored to the needs/preferences of the developers of that API.

Twitter will, perhaps, allow twitter.com to use Twitter's public api's. Along with other domains they use. Or maybe none at all, idk how their CORS policy is setup. They'll surely have a bit about it in the API docs.

The reason it works for you on postman is that you're not calling it from a website running in your browser, you're calling it from your computer - which is acting as a sort of 'back-end server'. Which is not a CORS policy violation, so it works fine for you.

It's important to note that CORS policies are being enforced by your browser - theoretically, the API has no idea if the request is from a website or a server. Your browser is telling on you, more or less. So it's not a guarantee of security or anything, but it's a pretty decent guard against it.

All of this is to say -- if you want to use their API, you'll want to set up your own routes and have your front-end call on your own backend server/API, and in turn have that call the twitter API. Which is what I'm guessing other people were trying to tell you.