Getting CORS policy error using Identity Server and Angular application

Question

I'm getting a CORS error when I try to access Web.API endpoint. I have an agular application, identity server for authentication and web.api for the data management.

The API runs on port :52177, Angular APP on :52178, and IS4 on :4165.

Here are the IS Configuration

new Client {
                    RequireConsent = false,
                    ClientId = "angular_spa",
                    ClientName = "Angular SPA",
                    AllowedGrantTypes = GrantTypes.Implicit,
                    AllowedScopes = { "openid", "profile" },
                    RedirectUris =
                    {
                        "http://localhost:52178/auth-callback"
                    },
                    PostLogoutRedirectUris = {"http://localhost:52178/?logout=true"},
                    AllowedCorsOrigins =
                    {
                        "http://localhost:52178",
                        "http://localhost:52177"
                    },
                    AllowAccessTokensViaBrowser = true,
                    AccessTokenLifetime = 3600,
                    IdentityTokenLifetime = 3600
                }

Angular APP

 return {
            authority: 'http://localhost:4165',
            client_id: 'angular_spa',
            redirect_uri: 'http://localhost:52178/auth-callback',
            post_logout_redirect_uri: 'http://localhost:52178/?logout=true',
            response_type: "id_token token",
            scope: "openid profile",
            filterProtocolClaims: true,
            loadUserInfo: true,
            automaticSilentRenew: true

        };

API

app.UseIdentityServerBearerTokenAuthentication(new IdentityServerBearerTokenAuthenticationOptions
            {
                Authority = "http://localhost:4165",
                RequiredScopes = new[] { "openid", "profile" },
                PreserveAccessToken = true,

                NameClaimType = System.Security.Claims.ClaimTypes.Name,
                RoleClaimType = System.Security.Claims.ClaimTypes.Role
            });

This is the error I'm getting

Access to XMLHttpRequest at 'http://localhost:52177/api/books?length=0&pageIndex=0&pageSize=10' from origin 'http://localhost:52178' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I added both :52178 and : 52177 Origins to the Client config for the IS4 but its still doesn't work. Any ideas what I'm missing?

The API itself will need to have CORS enabled – mackie Jul 31 '19 at 21:38 — mackie, Jul 31 '19 at 21:38

score 1 · Answer 1 · answered Jul 31 '19 at 21:58

1

As @mackie mentioned, The API itself will need to have CORS enabled. I had to install Install-Package Microsoft.AspNet.WebApi.Cors and at the WebApiConfig enable CORS for my client application

var cors = new EnableCorsAttribute("http://localhost:52178", "*", "*");
config.EnableCors(cors);

answered Jul 31 '19 at 21:58

Андрей Мастеров

19
1
6

1

where did you add these two lines? Angular client? if yes, where or if Identity Server then where ? – Aakash Kumar Apr 08 '20 at 10:27

Getting CORS policy error using Identity Server and Angular application

1 Answers1