基本身份验证 - 未为某些请求添加授权标头答案

【问题标题】：Basic auth - authorization header not being added for some requests基本身份验证 - 未为某些请求添加授权标头
【发布时间】：2019-12-18 11:24:42
【问题描述】：

这是我实现最简单版本的基本身份验证的第一种方法，但我无法让它工作。身份验证仅适用于第一个请求。

前端：React + Axios (withCredentials: true)，在http://localhost:3000 上可用

后端：Express + express-basic-auth，可在 http://localhost:3004 获得

app.use(basicAuth({
    users: { [ENV.user]: ENV.password },
    challenge: true,
    realm: 'Authorize',
}));

每个请求的标头：

res.header("Access-Control-Allow-Origin", "http://localhost:3000");
res.header("Access-Control-Allow-Credentials", "true");
res.header("Access-Control-Allow-Headers", "Accept, Origin, Content-Type, X-Auth-Token");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");

我使用challenge 标志，因为我想显示本机浏览器提示进行授权。

应用程序很简单。第一个触发的请求获取数据库记录的列表 (GET) 及其呈现。列表中的每个项目都有一个执行某些 PUT 请求的操作按钮。

所以，当第一个 GET 请求发生时，我被要求提供凭据（就像计划的那样）。

发送正确后返回200，一切正常。它适用于紧随其后发送的另一个 GET 请求。

很遗憾，所有其他请求（PUT 操作）都不起作用。他们在 OPTIONS 上抛出 401。确实，当 console.logging 在后端时，授权标头是空的，但我认为/读到浏览器应该自动设置它。它针对第一个请求执行此操作，我可以刷新并获取列表，所以我认为它也会附加到其他所有内容。我记得对 htaccess 做了同样的事情，而且它开箱即用。

我做错了什么？看起来 Chrome 仅为 GET 请求附加了授权标头......？忽略所有其他人？还是我错过了什么。

如何在不编写自定义登录屏幕，而是使用浏览器功能 (challenge: true) 的情况下使其工作？

【问题讨论】：

我认为你应该附上其余的代码，这种形式的信息可能太少了

标签： node.js express authorization axios basic-authentication

【解决方案1】：

这是因为除了 GET/HEAD/POST 之外的其他 HTTP 动词（例如 PUT 和 DELETE）必须启用 CORS 飞行前通过 CORS 限制。我建议你使用 expressjs/cors npm 包来处理你的问题。 https://github.com/expressjs/cors#configuration-options

安装包后将 res.headers() 替换为

var express = require("express")
var cors = require("cors")
var app = express()

app.use(cors()) //This line does the same with your res.headers() code block
app.options("*",cors()) //This line enables CORS pre-flight requests

您可以在我上面发布的链接中的启用 CORS Pre-Flight 下阅读有关此的更多信息，祝你好运。

【讨论】：