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，以确定允许哪些跨域请求参数发送到远程服务器并检查是否对Options req具有相应的Access-Control-Allow-Origin标题，用于授权您的origin（即您发出请求的网页的域名）。

通常，浏览器会向服务器发送预检Options，询问服务器是否允许它执行即将执行的操作 - 在您的情况下，GET。如果远程（跨域）服务器未响应预先Options请求，并且在响应中使用正确的标头授权您的GET，则浏览器将不会发送一个。{1}}。但是，你甚至没有这么做，因为对Options请求的回复本身甚至没有通过cors origin检查。

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

您可以阅读有关cors行为here

的更多信息

Answer 2

您遇到了CORS问题，为了超越它，您需要在后端启用CORS。

Answer 3

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

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

3 个答案: