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