我有一个react应用程序,正在尝试向远程API发出post请求。下面是相关代码:
const App = () => {
const [logData, setLogData] = useState([])
const fetchUserData = () => {
const username = 'logging-user';
const password = 'password';
const url = 'okstate';
const authHeader = 'Basic ' + btoa(username + ':' + password);
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': authHeader
},
body: JSON.stringify({ username, password, url })
};
fetch('url/get_logs', requestOptions)
.then(response => response.json())
.then(data => {
setLogData(data)
})
}
useEffect(() => {
fetchUserData()
}, [])
return (
<div>
test
</div>
)
在浏览器中,我得到一个CORs错误:
Access to fetch at 'url/get_logs' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
我知道这些是这种请求的超级常见错误,但在你否决我之前,我只是想更好地理解这些。我知道解决方案是允许在服务器上这样做,但我不控制服务器。我的问题是,我可以在Postman中发出同样的请求,它会返回应该返回的数据;我在Postman中配置了相同的头和授权。这是一致的吗?我认为一个请求就是一个请求(或者在这种情况下是一个帖子),它的起源是什么并不重要。
1条答案
按热度按时间idfiyjo81#
一只小鸟给了我这个答案,我认为这是有道理的,也是我一直在寻找的:
您可以从Postman发出请求而不会遇到CORS错误的原因是因为Postman不是浏览器。它是一个HTTP客户端工具,在浏览器安全策略的约束(包括CORS限制)之外运行。
Postman允许您直接从计算机的网络接口发出HTTP请求,绕过浏览器强制执行的同源策略和其他安全措施。它不强制CORS限制,因此您可以从Postman自由地向任何域发送请求。
另一方面,当您从浏览器中运行的React应用程序发出请求时,浏览器会强制执行安全策略,包括CORS。浏览器向服务器发送一个额外的preflight OPTIONS请求,以检查是否允许来自源的实际请求(POST)。服务器需要使用适当的CORS标头进行响应,以表明它允许来自应用的域的请求。如果服务器没有包含必要的头文件,或者只明确允许来自特定来源的请求,浏览器会由于CORS限制而阻止该请求。