IdentityServer4 SPA Login

问题

I want to create an SPA, and Login Via my custom Login Screen (Frontend is in React&Redux), but i miserably fail at it.

So basically i´ll get an 404 Error returned, when using

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

the response I get is always: POST https://localhost:5000/api/Authenticate/Login net::ERR_ABORTED 404 (Not Found)

The Backend looks like:

            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");
                });
            });

and in the Configure Method as app.UseCors();

My IdentityServer4, wont Log any Errors nor an Log in anyway.

Here an Gist of the related Files: https://gist.github.com/TheRealLenon/2da8ccebd1b1699ff3afd3d3612bf971

But when changing it to policy.AllowAnyOrigin(); i´ll get the following Log in my Server: 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. And the Response is: POST https://localhost:5000/api/Login net::ERR_CONNECTION_REFUSED

Do you have any idea, what is wrong? Or anyone else? This is confusing, because theres nothing helpful i could found on the Internet with CORS and the 404 Error.. When appending app.UseAuthentication(); i will get the following error-Message: 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 which confuses me, because i´ve defined it within:

            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");
                });
            });

Ive also tried it with multiple Endpoints, in case I´ve mismatched the "Route" in my AuthenticateController, but I can set it like I want, the result will be the Same.

回答1:

As you are defining the clients on Config.cs, the default CORS implementation will be in use. You just need to add the spa app's origin to AllowedCorsOrigins when defining the client

                new Client
                {
                    ...

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

                    ...
                },

Note http://localhost:5001 is the origin and http://localhost:5001/ is the url

Edit:

To have login UI on SPA app, you also need to modify Startup class of IdentityServer to add cors, here is details:

1. Add this code to ConfigureServices method:

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

2. And this code to Configure method

app.UseCors("default");

来源：https://stackoverflow.com/questions/61809873/identityserver4-spa-login