React App - CORS问题-访问fetch已被CORS策略阻止

Question

我正在使用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:

当我通过使用邮递员使用相同的令牌捕获数据时，一切都很好

我试图找到解决方案，但每个人都指的后端设置在同一台机器上。我该如何解决这个问题呢?

Answer 1

CORS策略是防止其他外部网站访问API的重要功能。

一些api启用了CORS，其他api禁用了CORS。白名单将根据该API开发人员的需求/偏好进行定制。

Twitter可能会允许twitter.com使用Twitter的公共api。以及他们使用的其他域名。或者根本没有，看看他们的CORS策略是如何设置的。他们肯定会在API文档中对此有一些介绍。

它在邮差上为你工作的原因是你不是从浏览器中运行的网站调用它，你是从你的计算机上调用它——这是一种"后端服务器"。这并没有违反CORS策略，所以它对您来说工作得很好。

重要的是要注意CORS策略是由浏览器强制执行的-理论上，API不知道请求是来自网站还是服务器。你的浏览器或多或少会泄露你的信息。所以这不是安全的保证，但它是一个相当不错的防范措施。

所有这些都是说——如果你想使用他们的API，你会想要设置你自己的路由，让你的前端调用你自己的后端服务器/API，然后让它调用twitter的API。这就是我猜其他人想告诉你的。