使用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/