javascript 使用 Postman 工作但不是来自浏览器的 Basic Auth 的 GET 请求
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49051366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
GET request with Basic Auth working from Postman but not from the browser
提问by JC Garcia
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.
我正在使用 odata api，当我使用邮递员执行 GET 请求时，工作完美，我得到了预期的响应。
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.
但是当我从 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.
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);
});This is the 401 that I'm getting....
这是我得到的 401....
回答by Rhys
This is most likely because Postman is probably not sending a preflight Optionsrequest before your GET, and upon receipt of the GETresponse doesn't perform any kind of cors check (since it wouldn't really make sense to anyway).
这很可能是因为 Postman 可能没有Options在您的 之前发送预检请求GET，并且在收到GET响应后不执行任何类型的 cors 检查（因为无论如何它都没有真正意义）。
On the other hand, when running code from your webpage Chrome is both performing a preflight Optionsin order to ascertain what cross-domain request parameters it's allowed to send to the remote server and checking if the response to the Optionsreq has the appropriate Access-Control-Allow-Originheader on to authorise your origin(i.e. the domain of the page you're making the request from).
另一方面，当从您的网页运行代码时，Chrome 会执行预检Options以确定允许将哪些跨域请求参数发送到远程服务器，并检查对Optionsreq的响应是否具有适当的Access-Control-Allow-Origin标头来授权您的origin（即您发出请求的页面的域）。
Typically, a preflight Optionsis 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 Optionsrequest with the correct headers in the response authorising your GETthen the browser won't send one. You're not even getting that far however, since the response to your Optionsrequest doesn't even itself pass a cors origincheck.
通常，Options浏览器将预检发送到服务器，以询问服务器是否允许它执行即将执行的操作 - 在您的情况下，一个GET. 如果远程（跨域）服务器没有Options使用授权您的响应中的正确标头响应prelight请求，GET则浏览器将不会发送一个。但是，您甚至还没有走那么远，因为对您的Options请求的响应本身甚至没有通过 corsorigin检查。
If you control the server, you need to respond to the Optionsrequest by setting the Access-Control-Allow-Originheader on the response to include the originof your request page, and also to set the Access-Control-Allow-Methodsto 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.
如果您控制服务器，则需要Options通过Access-Control-Allow-Origin在响应上设置标题以包含origin请求页面的 来响应请求，并将 设置Access-Control-Allow-Methods为包含GET（可能还有OPTIONS）。如果您不控制远程服务器，很可能任何普通的 api 服务（例如您尝试访问的那个服务）在其后端都有一些配置，您可以在某处设置授权您的origin.
You can read up more on cors behaviour here
回答by Mike Tung
You are experiencing a CORS issue, in order to get past it you need to enable CORS on your backend.
您遇到了 CORS 问题，为了解决这个问题，您需要在后端启用 CORS。
回答by RohitAneja
Ideal way is to allow at your server to allow calls from different domain, but if you don't have access to back-end, and testing services, you can install this chrome plugin to bypass pre-flight requests. cors chrome extension
理想的方法是在您的服务器上允许来自不同域的调用，但如果您无权访问后端和测试服务，则可以安装此 chrome 插件来绕过预检请求。 cors 镀铬扩展
