IdentityServer4 SPA登录

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,
      }),

我得到的响应始终是：POSThttps://localhost:5000/api/Authenticate/Loginnet :: 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

您有什么想法，怎么了？还是其他人？这令人困惑，因为在Internet上使用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");
                });
            });

[我也尝试了多个端点，以防万一我在AuthenticateController中不匹配“ Route”，但是我可以根据需要设置它，结果将是相同的。

Answer 1

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

                new Client
                {
                    ...

                    AllowedCorsOrigins =
                        { 
                            "http://localhost:5001" 
                        },

                    ...
                },

注意http://localhost:5001是来源，http://localhost:5001/是网址

编辑：

要在SPA应用程序上具有登录UI，还需要修改IdentityServer的Startup类以添加cors，这是详细信息：

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

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

2. 并且此代码为Configure方法

app.UseCors("default");