带有基本身份验证的 GET 请求来自 Postman 但不是来自浏览器答案

【问题标题】：GET request with Basic Auth working from Postman but not from the browser带有基本身份验证的 GET 请求来自 Postman 但不是来自浏览器
【发布时间】：2018-03-01 14:03:09
【问题描述】：

我正在使用 odata api，当我使用邮递员发出 GET 请求时，效果很好，并且我得到了预期的响应。

但是，当我从我的 React 应用程序中使用 fetch 请求时，该请求会引发 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....

【问题讨论】：

标签： javascript get request odata fetch-api

【解决方案1】：

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

另一方面，当从您的网页运行代码时，Chrome 会同时执行预检 Options 以确定允许将哪些跨域请求参数发送到远程服务器并检查对 @987654326 的响应是否@req 有适当的 Access-Control-Allow-Origin 标头来授权您的 origin（即您发出请求的页面的域）。

通常，浏览器将预检Options 发送到服务器，询问服务器是否允许执行它即将执行的操作 - 在您的情况下，是GET。如果远程（跨域）服务器在授权您的GET 的响应中未使用正确的标头响应 prelight Options 请求，则浏览器将不会发送。但是，您甚至还没有走那么远，因为对您的 Options 请求的响应本身甚至没有通过 cors origin 检查。

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

你可以阅读更多关于 cors 行为here

【讨论】：

嗨@Rhys，如果我无法访问后端...（就是这种情况）我该如何解决这个问题？
@JCGarcia 我刚刚更新了我的答案以包含一些关于此的信息 - 但基本上，如果您使用一些您有帐户或类似帐户的标准服务，我希望他们在他们的后端配置中公开一些选项，您可以将其设置为将您的域/来源列入白名单
@JCGarcia 获取信息，如果您从与您尝试访问的服务器相同的域发出请求，则不会出现此问题。如果您在服务器端发出请求，您也不会遇到这个问题，尽管值得仔细考虑您做出的任何决定的安全性/安全性影响，因为这是 CORS 首先提供帮助的一部分跨度>
我理解安全方面的考虑，实际上api除了读取数据之外不允许任何东西。这就是为什么来自客户端的请求是理想的。也因为整个应用程序是无服务器的，我很乐意保持这种状态。现在您已经解释了 CORS 问题，（顺便说一句，这是一个非常好的问题）接下来的事情就是找到第三方服务，有什么建议吗？
@JCGarcia 当我在答案中提到第三方服务时，我的意思是您正在访问的服务（服务器后面）-大概，编写您要与之交谈的服务的人也会考虑交叉-domain req 影响并且应该有一个解决方案（或者由于某种原因不想要一个）。这就是为什么我希望他们公开某种方式来告诉他们您的网站（或者不这样做，如果他们出于某种原因不想这样做）

【解决方案2】：

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

【讨论】：

嗨@Mike_Tung，我不走运...我无法访问后端，所以这是不可能的...?。有什么办法绕过它吗？
不可能绕过，因为它纯粹是后端安全，阻止您访问资源，您可以部署在完全相同的服务器上，但有风险
最简单的解决方案是什么？设置服务器？仅针对 1 个查询似乎过多...但如果是这样，您会推荐什么？

【解决方案3】：

理想的方法是允许在您的服务器上允许来自不同域的调用，但如果您无权访问后端和测试服务，则可以安装此 chrome 插件以绕过飞行前请求。 cors chrome extension

【讨论】：