使用fetch JS从localhost访问具有基本身份验证的url时出现CORS错误

Question

我正在尝试访问API端点GET https://example.com/data。端点具有基本身份验证，下面是我最初尝试调用端点的方式:

const credentials = btoa("username:password");
fetch(fullUrl, {method: callMethod,
credentials: "include",
headers: new Headers({
'Authorization': `Basic ${credentials}`,
}),
}).then(function (response) {
console.log(response)
}).catch(error => console.log("There is an error:", error))

这使我的错误如下:

Access to fetch at 'https://example.com/data' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

然后，我使用mode: 'no-cors'，如下所示:

const credentials = btoa("username:password");
fetch(fullUrl, {
mode:  'no-cors',
method: callMethod,
credentials: "include",
headers: new Headers({
'Authorization': `Basic ${credentials}`,
}),
}).then(function (response) {
console.log(response)
}).catch(error => console.log("There is an error:", error))

这允许我通过在浏览器中弹出窗口输入用户名和密码来访问端点，但随后响应不符合预期，我无法访问响应文本。然而，在网络选项卡中，我可以看到我们正在获得200个响应状态码以及所需的响应。控制台的响应如下:

Response {type: 'opaque', url: '', redirected: false, status: 0, ok: false, …}

我的主要目标是通过代码使用用户名和密码来删除CORS错误，而不必通过弹出窗口输入用户名和密码。如果我必须访问我在网络选项卡中看到的响应，而不是使用no-cors模式时我收到的不透明响应。

Answer 1

只有当端点明确地在CORS请求中允许Authorization标头时，您想要的才有效。浏览器将发出飞行前请求

OPTIONS https://example.com/data
Origin: http://localhost:8080
Access-Control-Request-Headers: Authorization

端点必须用 响应的

200 OK
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Headers: Authorization

如果你控制端点，你可以实现这一点，例如，在Node.js端点的情况下，使用cors包。

但是如果端点是由其他人控制的，那么这个人已经决定他们不希望从具有不同来源的网页调用基本身份验证，并且您无法规避这一点。然后，您只能从您控制的web服务器进行所需的调用。