WebAPI + Angular4 using IdentityServer4 CORS error - asp.net-web-api

Question

I have a ASP.Net core 1.X application which is setup to use IdentityServer4 with OpenIdConnect for its Authorization.
when I run the service use the browser to go to http://localhost:xxx/api/mycontroller/myresource this correctly redirects me to the identity server for authorization and then returns value.
now when I add a Angular4 files and launch it, it shows the pages as expected, but when the request is made to the http://localhost:xxx/api/mycontroller/myresource from the angularjs I get a CORS error on my browser console.
XMLHttpRequest cannot load http://localhost:5000/connect/authorize?client_id=system.health.check&redirect_uri=http%3A%2F%2Flocalhost%3A64886%2Fsignin-oidc&response_type=code%20id_token&scope=openid%20profile%20roles%20hierarchy%20healthcheck&response_mode=form_post&nonce=636396863541493382.OTI5NmUxOTYtYzE4Mi00MTY3LTgwYTYtNjlhYzhkNDQxYTY3MTYxNzI2MDUtOWM1Yy00MGExLWE2NTEtNmZjZmRjZmNjMmYz&state=CfDJ8HLk2yX8N6hEj4-UtnTRPL4rvxklhhFhg_Yc-8iFJwSP06FoI_9lUwaFJacx2xU81KDenMUSbsVAjF5QowMT_xRL2Z9mWyxFRykvBASUGB3mHk0RjaSCJzjYXtAYTbkbDF0wLzwALBTcaJ2tgwOwuG_vLWr2dAeiLyyqTiSVZqFziwssoMM_a9PXNAobGPHwl125pMihgXZxoylghIa0N_oS_4sswGCAr_kzW7cc9EMHFmApJTy7Yv29wUB4Tp2ddorOBKxt2t4-YqunsqHViKtlx-xUo0jFcuh30ZY4LDz90wLlHDvGkk_xYCqfJFBMaveNQAG5crvoPIiOYQcVJzNQMAzvXM7Z326E7pzVFVa-. Redirect from 'http://localhost:5000/connect/authorize?client_id=system.health.check&redirect_uri=http%3A%2F%2Flocalhost%3A64886%2Fsignin-oidc&response_type=code%20id_token&scope=openid%20profile%20roles%20hierarchy%20healthcheck&response_mode=form_post&nonce=636396863541493382.OTI5NmUxOTYtYzE4Mi00MTY3LTgwYTYtNjlhYzhkNDQxYTY3MTYxNzI2MDUtOWM1Yy00MGExLWE2NTEtNmZjZmRjZmNjMmYz&state=CfDJ8HLk2yX8N6hEj4-UtnTRPL4rvxklhhFhg_Yc-8iFJwSP06FoI_9lUwaFJacx2xU81KDenMUSbsVAjF5QowMT_xRL2Z9mWyxFRykvBASUGB3mHk0RjaSCJzjYXtAYTbkbDF0wLzwALBTcaJ2tgwOwuG_vLWr2dAeiLyyqTiSVZqFziwssoMM_a9PXNAobGPHwl125pMihgXZxoylghIa0N_oS_4sswGCAr_kzW7cc9EMHFmApJTy7Yv29wUB4Tp2ddorOBKxt2t4-YqunsqHViKtlx-xUo0jFcuh30ZY4LDz90wLlHDvGkk_xYCqfJFBMaveNQAG5crvoPIiOYQcVJzNQMAzvXM7Z326E7pzVFVa-' to 'http://localhost:5000/account/login?returnUrl=%2Fconnect%2Fauthorize%2Flogin%3Fclient_id%3Dsystem.health.check%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A64886%252Fsignin-oidc%26response_type%3Dcode%2520id_token%26scope%3Dopenid%2520profile%2520roles%2520hierarchy%2520healthcheck%26response_mode%3Dform_post%26nonce%3D636396863541493382.OTI5NmUxOTYtYzE4Mi00MTY3LTgwYTYtNjlhYzhkNDQxYTY3MTYxNzI2MDUtOWM1Yy00MGExLWE2NTEtNmZjZmRjZmNjMmYz%26state%3DCfDJ8HLk2yX8N6hEj4-UtnTRPL4rvxklhhFhg_Yc-8iFJwSP06FoI_9lUwaFJacx2xU81KDenMUSbsVAjF5QowMT_xRL2Z9mWyxFRykvBASUGB3mHk0RjaSCJzjYXtAYTbkbDF0wLzwALBTcaJ2tgwOwuG_vLWr2dAeiLyyqTiSVZqFziwssoMM_a9PXNAobGPHwl125pMihgXZxoylghIa0N_oS_4sswGCAr_kzW7cc9EMHFmApJTy7Yv29wUB4Tp2ddorOBKxt2t4-YqunsqHViKtlx-xUo0jFcuh30ZY4LDz90wLlHDvGkk_xYCqfJFBMaveNQAG5crvoPIiOYQcVJzNQMAzvXM7Z326E7pzVFVa-' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:64886' is therefore not allowed access.
However the logs on the IdentityServer4 shows
BTW http://localhost:5000 is my IdentityServer4 address and http://localhost:64886 is the service serving the Angular files and hosting the WebAPI.
Any ideas what I may be missing here?
UPDATE 1
Not sure if this helps, but my OpenIdConnectOption is setup as below
"OpenIdConnectOptions": {
"AuthenticationScheme": "oidc",
"SignInScheme": "Cookies",
"Authority": "http://localhost:5000",
"RequireHttpsMetadata": false,
"ClientId": "system.health.check",
"ClientSecret": "secret",
"ResponseType": "code id_token",
"GetClaimsFromUserInfoEndpoint": true,
"SaveTokens": true,
"Scope": [ "roles", "hierarchy", "healthcheck" ]
},
UPDATE 2
If I put in the [Authorize] attribute on my HomeController things work as expected as its redirecting me to the login page even before the Angular files are shown. So does it mean that I cannot have the WebAPI controller protected unless the MVC is first Authorized? Also why do I get a CORS error in this case.
Regards
Kiran

Answer 1

I ran into the same issue and ended up using the [Authorize] on HomeController, but you can do it within Angular as well
if you want to authorize within the Angular application you have to switch the client Grant Type to "Implicit" and do the oidc with an javascript library. You also have to change the responseType from "code id_token" to only "id_token" because in an angular app you cannot open a private backchannel for the code.
OIDC Javascript client:
https://github.com/IdentityModel/oidc-client-js
Here is an article which explains your approach:
https://damienbod.com/2016/10/01/identityserver4-webapi-and-angular2-in-a-single-asp-net-core-project/