javascript - GET 请求使用 Basic Auth 从 Postman 工作，而不是从浏览器工作

Question

我正在使用 odata api，当我使用 postman 执行 GET 请求时，工作完美，我得到了预期的响应。

但是当我使用来 self 的 React 应用程序的获取请求时，该请求会抛出 401，使用与我之前在 Postman 中使用的相同的 header 。它表示 对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问源“http://localhost:3000”。响应具有 HTTP 状态代码 401。

关于如何解决这个请求的任何想法？ 谢谢!

fetch('https://api4.successfactors.com/odata/v2/', {
  method: 'GET',
  headers: {
    authorization: `Basic ${auth}`, //auth is the encoded base64 username:password
  },
})
  .then(response => response.json())
  .then((response) => {
    console.log('in response: ', response);
  })
  .catch((error) => {
    console.log('in fetchJobs error: ', error);
  });

这是我收到的 401...

Answer 1

这很可能是因为 Postman 可能没有发送预检 Options在您的 GET 之前请求，并在收到 GET response 不执行任何类型的 cors 检查(因为无论如何它都没有真正意义)。

另一方面，当从您的网页运行代码时，Chrome 会执行预检 Options为了确定它允许发送到远程服务器的跨域请求参数，并检查是否对 Options 的响应req 有适当的 Access-Control-Allow-Origin header 授权您的 origin (即您发出请求的页面的域)。

通常，预检 Options由浏览器发送到服务器，询问服务器是否允许执行它即将执行的操作 - 在您的例子中，一个 GET .如果远程(跨域)服务器没有响应 prelight Options在授权您的 GET 的响应中使用正确的 header 请求然后浏览器不会发送一个。然而，自从对您的 Options 的回应以来，您甚至还没有走到那一步。请求本身甚至没有通过 cors origin检查。

如果您控制服务器，则需要响应 Options通过设置 Access-Control-Allow-Origin 请求响应标题中包含 origin您的请求页面，并设置 Access-Control-Allow-Methods包括 GET (可能还有 OPTIONS )。如果您不控制远程服务器，则很可能任何普通的 api 服务(例如您尝试访问的服务)在其后端都有一些配置，您可以在某处设置以授权您的 origin。 .

您可以阅读更多关于 cors 行为的信息 here