使用IdentityServer4的WebAPI + Angular4 CORS錯誤

Question

我有一個ASP.Net核心1.X應用程序，它被設置爲使用IdentityServer4與OpenIdConnect進行授權。

當我運行服務

使用瀏覽器去http://localhost:xxx/api/mycontroller/myresource這個正確重定向我的授權身份的服務器，然後下返回值。

現在，當我加入Angular4文件並啓動它，它顯示爲預期的頁面，但是當請求發送到http://localhost:xxx/api/mycontroller/myresource從angularjs做我得到一個CORS錯誤我的瀏覽器控制檯上。

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.

但是在IdentityServer4日誌顯示

BTW http://localhost:5000是我IdentityServer4地址和http://localhost:64886是服務於角文件和託管的WebAPI的服務。

任何想法，我可能會在這裏失蹤？

更新1

不知道這是否會有所幫助，但我OpenIdConnectOption是設置如下

"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" ] 
}, 

更新2

如果我把在[Authorize]屬性我HomeController事情就像預期的那樣工作，甚至在顯示Angular文件之前將其重定向到登錄頁面。那麼這是否意味着我不能讓WebAPI控制器受到保護，除非MVC是第一個授權的？此外，爲什麼我會在這種情況下得到一個CORS錯誤。

問候 基蘭

Answer 1

我遇到同樣的問題，結束了使用上的HomeController的[授權]，但你可以在角做得一樣好

，如果你想在角應用程序中的授權您必須將客戶端授權類型切換爲「隱式」，並使用JavaScript庫執行oidc。您還必須將r​​esponseType從「code id_token」更改爲僅「id_token」，因爲在角度應用程序中，您無法打開代碼的專用反向通道。

OIDC JavaScript客戶端： https://github.com/IdentityModel/oidc-client-js

這裏是一個物品，其解釋你的方法： https://damienbod.com/2016/10/01/identityserver4-webapi-and-angular2-in-a-single-asp-net-core-project/