Question

这是实现最简单的基本auth版本的第一种方法，我无法使其正常工作。身份验证仅对第一个请求有效。

前端：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）？

Answer 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飞行前下阅读有关此的更多信息。

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

1 个答案: