IdentityServer4 SPA Login

Question

我想创建一个SPA，并通过我的自定义登录屏幕登录(前端在React&Redux中(，但我惨遭失败。

所以基本上我会在使用时返回 404 错误

const username = 'bob'
const password = 'bob'
const returnUrl = 'https://localhost:5001/'
fetch('https://localhost:5000/api/Authenticate/Login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
body: JSON.stringify({
username,
password,
returnUrl,
}),

我得到的回复总是：POST https://localhost:5000/api/Authenticate/Login net：：ERR_ABORTED 404(未找到(

后端如下所示：

services.AddCors(setup =>
{
setup.AddDefaultPolicy(policy =>
{
policy.WithOrigins("https://localhost:5000", "https://localhost:5001");
policy.AllowAnyHeader();
policy.AllowAnyMethod();
policy.AllowCredentials();
//.WithHeaders(HeaderNames.ContentType, "x-custom-header");
});
});

并在"配置方法"中app.UseCors();

我的 IdentityServer4 不会记录任何错误，也不会登录。

以下是相关文件的要点：https://gist.github.com/TheRealLenon/2da8ccebd1b1699ff3afd3d3612bf971

但是当将其更改为policy.AllowAnyOrigin();时，我将在我的服务器中获得以下日志：System.InvalidOperationException: The CORS protocol does not allow specifying a wildcard (any) origin and credentials at the same time. Configure the CORS policy by listing individual origins if credentials needs to be supported.得到的回应是：POST https://localhost:5000/api/Login net::ERR_CONNECTION_REFUSED

你知道吗，出了什么问题？还是其他人？这令人困惑，因为我在互联网上找不到任何有用的 CORS 和 404 错误。 附加app.UseAuthentication();时，我将收到以下错误消息：CORS request made for path: /api/Login from origin: https://localhost:5001 but was ignored because path was not for an allowed IdentityServer CORS endpoint这让我感到困惑，因为我已经在其中定义了它：

services.AddCors(setup =>
{
setup.AddDefaultPolicy(policy =>
{
policy.WithOrigins("https://localhost:5000", "https://localhost:5001");
policy.AllowAnyHeader();
policy.AllowAnyMethod();
policy.AllowCredentials();
//.WithHeaders(HeaderNames.ContentType, "x-custom-header");
});
});

我还尝试了多个端点，以防我与身份验证控制器中的"路由"不匹配，但我可以根据需要设置它，结果将是相同的。

Answer 1

当您在Config.cs上定义客户端时，将使用默认的 CORS 实现。您只需要在定义客户端时将水疗应用的origin添加到AllowedCorsOrigins

new Client
{
...
AllowedCorsOrigins =
{ 
"http://localhost:5001" 
},
...
},

注意http://localhost:5001是源，http://localhost:5001/是 url

编辑：

要在SPA应用程序上拥有登录UI，您还需要修改Startup身份服务器类以添加cors，以下是详细信息：

1. 将此代码添加到ConfigureServices方法：

services.AddCors(options => {
options.AddPolicy("default", policy =>
{
policy.WithOrigins("http://localhost:5001")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});

2. 和这段代码Configure方法

app.UseCors("default");