reactjs React应用程序-CORS问题-CORS策略阻止了获取访问

q5lcpyga  于 2023-01-17  发布在  React
关注(0)|答案(1)|浏览(177)

我正在使用react制作应用程序,它将从twitter API捕获数据
那是我准则

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>)

}

我得到了这种错误

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:

当我通过使用postman使用相同的标记捕获数据时,一切都很正常
我试图找到解决方案,但每个人都是指后端设置在同一台机器上。我该如何解决它在我的情况?

rxztt3cl

rxztt3cl1#

CORS策略是防止其他外部网站访问API的重要功能。
一些API启用了CORS,另一些API禁用了CORS。白名单将根据该API开发人员的需求/偏好进行定制。
Twitter可能会允许twitter.com使用Twitter的公共API。沿着他们使用的其他域。或者可能根本不允许。我不知道他们的CORS政策是如何设置的。他们肯定会在API文档中有一些关于它的信息。
它之所以能在postman上运行,是因为你不是从浏览器上运行的网站调用它,而是从你的电脑调用它--电脑充当着某种“后端服务器”。这不违反CORS政策,所以它对你来说很好用。
值得注意的是,CORS策略是由您的浏览器强制执行的--理论上,API不知道请求是来自网站还是服务器。您的浏览器或多或少在告诉您。因此,它不能保证安全性或任何东西,但它是一个相当不错的防范措施。
所有这一切都是说--如果你想使用他们的API,你会想建立自己的路由,并在自己的后端服务器/API上进行前端调用,然后再调用twitter API。我猜这就是其他人试图告诉你的。

相关问题