如何在SPA+API应用程序中使用浏览器的BASIC身份验证本机提示

Question

我在js前端应用程序上使用FETCH

fetch("http://localhost:3333/", {
method: "GET",
headers: new Headers({ Accept: "application/json" }),
credentials: "same-origin",
})
.then((response) => {
if (response.ok) return response.json();
else throw new Error("General error");
})
.then((jsonData) => console.log({ jsonData }))
.catch((err) => console.log({ err }));

响应为401 Unauthorized withwww-authenticate: Basic realm="Login", charset="UTF-8"

问题是浏览器不会从这个获取中弹出本机用户名和密码提示。只有当我键入"；http://localhost:3333/"在导航栏上。

我如何使用浏览器的本机提示用户名和密码在我的前端登录？

Answer 1

您的代码是正确的，应该弹出浏览器提示，但前提是html页面也是从localhost:3333提供的，因此credentials: "same-origin"

在HTML页面和JSON API由不同的主机提供服务的情况下，您必须通过CORS验证。

在前端发送带有标志include的凭据

fetch("http://localhost:3333/", {
method: "GET",
headers: new Headers({ Accept: "application/json" }),
credentials: "include",
})

在API后端使用头进行响应，允许来自HTML页面的CORS请求，在本例中为localhost:8000

Access-Control-Allow-Origin: http://localhost:8000
Access-Control-Allow-Credentials: true