使用Postman的Basic Auth GET请求，但不是浏览器 [英] GET request with Basic Auth working from Postman but not from the browser

问题描述

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

I'm working with an odata api, and when I'm using postman to do a GET request, works perfect and I get the response as I was expecting.

但是当我使用来自我的React应用程序的获取请求时，请求会抛出401，使用相同的我之前在Postman中使用的标题。它表示对预检请求的响应未通过访问控制检查：请求的资源上没有Access-Control-Allow-Origin标头。因此不允许来源'http：// localhost：3000'访问。响应的HTTP状态代码为401.

But when I use a fetch request from my React app, the request throws a 401, using the same headers as I previously used in Postman. and it says that 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.

有关如何解决此请求的任何想法？
谢谢！

Any idea about how to solve this request? Thanks!

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我得到....

This is the 401 that I'm getting....

推荐答案

这很可能是因为Postman可能没有在您的预先发送预检期权请求之前 GET ，并且在收到 GET 回复后，不执行任何类型的cors检查（因为它不会无论如何真的有意义。）

This is most likely because Postman is probably not sending a preflight Options request before your GET, and upon receipt of the GET response doesn't perform any kind of cors check (since it wouldn't really make sense to anyway).

另一方面，当你的网页运行代码时，Chrome正在执行预检选项为了确定允许发送到远程服务器的跨域请求参数，并检查对 Options req的响应是否具有相应的 Access-Control-Allow-Origin 标题打开以授权您的来源（即您正在请求的页面的域名）。

On the other hand, when running code from your webpage Chrome is both performing a preflight Options in order to ascertain what cross-domain request parameters it's allowed to send to the remote server and checking if the response to the Options req has the appropriate Access-Control-Allow-Origin header on to authorise your origin (i.e. the domain of the page you're making the request from).

通常，浏览器会向服务器发送预检选项，询问服务器是否允许执行它即将执行的操作 - 在您的情况下， GET 。如果远程（跨域）服务器未响应prelight 选项请求，并在响应中使用正确的标头授权 GET 然后浏览器不会发送一个。你甚至没有达到那么远，因为对你的选项请求的回复本身甚至没有传递一个cors 来源 check。

Typically, a preflight Options is sent to the server by a browser to ask the server if it's allowed to perform the operation it's about to perform - in your case, a GET. If the remote (cross-domain) server doesn't respond to the prelight Options request with the correct headers in the response authorising your GET then the browser won't send one. You're not even getting that far however, since the response to your Options request doesn't even itself pass a cors origin check.

如果您控制服务器，则需要通过设置<来响应选项请求回复中的code> Access-Control-Allow-Origin 标头包含您的请求页面的 origin ，并且还要设置 Access-Control-Allow-Methods 包含 GET （可能 OPTIONS ）。如果您不控制远程服务器，可能是任何正常的api服务，例如您尝试命中的服务在其后端有一些配置，您可以设置某个位置来授权您的 origin 。

If you control the server, you need to respond to the Options request by setting the Access-Control-Allow-Origin header on the response to include the origin of your request page, and also to set the Access-Control-Allow-Methods to include GET (and probably OPTIONS). If you don't control the remote server, it's likely any normal api service such as the one you're trying to hit has some configuration in their backend you can set somewhere to authorise your origin.

您可以阅读有关cors行为的更多信息这里

You can read up more on cors behaviour here

这篇关于使用Postman的Basic Auth GET请求，但不是浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！