当尝试从API获取数据时,React应用程序中出现COR错误,但在Postman中有效

btqmn9zl  于 2023-06-22  发布在  Postman
关注(0)|答案(1)|浏览(147)

我有一个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中配置了相同的头和授权。这是一致的吗?我认为一个请求就是一个请求(或者在这种情况下是一个帖子),它的起源是什么并不重要。

idfiyjo8

idfiyjo81#

一只小鸟给了我这个答案,我认为这是有道理的,也是我一直在寻找的:
您可以从Postman发出请求而不会遇到CORS错误的原因是因为Postman不是浏览器。它是一个HTTP客户端工具,在浏览器安全策略的约束(包括CORS限制)之外运行。
Postman允许您直接从计算机的网络接口发出HTTP请求,绕过浏览器强制执行的同源策略和其他安全措施。它不强制CORS限制,因此您可以从Postman自由地向任何域发送请求。
另一方面,当您从浏览器中运行的React应用程序发出请求时,浏览器会强制执行安全策略,包括CORS。浏览器向服务器发送一个额外的preflight OPTIONS请求,以检查是否允许来自源的实际请求(POST)。服务器需要使用适当的CORS标头进行响应,以表明它允许来自应用的域的请求。如果服务器没有包含必要的头文件,或者只明确允许来自特定来源的请求,浏览器会由于CORS限制而阻止该请求。

相关问题