使用Postman的Basic Auth GET请求,但不是浏览器

Question

我正在使用odata api,当我使用邮递员做GET请求时,工作完美,我得到的回应正如我所期待的那样.

但是当我使用来自我的React应用程序的获取请求时,请求会抛出401,使用与之前在Postman中使用的相同的标头.它说的Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 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响应后没有执行任何类型的cors检查(因为它无论如何都没有意义).

另一方面,当您从网页运行代码时,Chrome会执行预检Options,以确定允许哪些跨域请求参数发送到远程服务器,并检查对Optionsreq 的响应是否具有适当的Access-Control-Allow-Origin标头以进行授权您的origin(即您提出请求的页面的域名).

通常,Options浏览器会向服务器发送预检,以询问服务器是否允许它执行将要执行的操作 - 在您的情况下,a GET.如果远程(跨域)服务器没有响应prelight Options请求并在响应中使用正确的标头授权您GET的浏览器将不会发送一个.然而,你甚至没有达到那么远,因为对你的Options请求的回复本身甚至都没有通过cors origin检查.

如果您控制服务器,则需要Options通过Access-Control-Allow-Origin在响应上设置标题来包含origin请求页面,以及设置Access-Control-Allow-Methods包含GET(可能OPTIONS)来响应请求.如果您不控制远程服务器,则可能是任何正常的api服务(例如您尝试命中的服务)在其后端具有某些配置,您可以设置某个地方来授权您的origin.

您可以在此处阅读有关cors行为的更多信息

Answer 2

您遇到了 CORS 问题，为了解决这个问题，您需要在后端启用 CORS。