为 Web Api 2 和 OWIN 令牌身份验证启用 CORS

Question

我有一个 ASP.NET MVC 5 web 项目 (localhost:81)，它使用 Knockoutjs 从我的 WebApi 2 项目 (localhost:82) 调用函数，以便在我启用 CORS 的两个项目之间进行通信。 到目前为止一切正常，直到我尝试对 WebApi 实施 OWIN 令牌身份验证。

要在 WebApi 上使用 /token 端点，我还需要在端点上启用 CORS，但是经过数小时的尝试和搜索解决方案后，它现在仍然可以工作，并且 api/token 仍然导致：

XMLHttpRequest cannot load http://localhost:82/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. 

public void Configuration(IAppBuilder app)
{
    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
    TokenConfig.ConfigureOAuth(app);
    ...
}

令牌配置

public static void ConfigureOAuth(IAppBuilder app)
{
    app.CreatePerOwinContext(ApplicationDbContext.Create);
    app.CreatePerOwinContext<AppUserManager>(AppUserManager.Create);

    OAuthAuthorizationServerOptions OAuthServerOptions = new OAuthAuthorizationServerOptions()
    {
        AllowInsecureHttp = true,
        TokenEndpointPath = new PathString("/token"),
        AccessTokenExpireTimeSpan = TimeSpan.FromDays(1),
        Provider = new SimpleAuthorizationServerProvider()
    };

    app.UseOAuthAuthorizationServer(OAuthServerOptions);
    app.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions());
}

授权提供者

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
    context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });

    var appUserManager = context.OwinContext.GetUserManager<AppUserManager>();
    IdentityUser user = await appUserManager.FindAsync(context.UserName, context.Password);

    if (user == null)
    {
        context.SetError("invalid_grant", "The user name or password is incorrect.");
        return;
    }
    ... claims
}

身份配置

public static AppUserManager Create(IdentityFactoryOptions<AppUserManager> options, IOwinContext context)
{
    // Tried to enable it again without success. 
    //context.Response.Headers.Add("Access-Control-Allow-Origin", new[] {"*"});
    
    var manager = new AppUserManager(new UserStore<AppUser>(context.Get<ApplicationDbContect>()));
        
    ...

    var dataProtectionProvider = options.DataProtectionProvider;
    if (dataProtectionProvider != null)
    {
        manager.UserTokenProvider =
                new DataProtectorTokenProvider<AppUser>(dataProtectionProvider.Create("ASP.NET Identity"));
    }
    return manager;
}

编辑：

1. 重要的一点是，直接打开端点（localhost:82/token）是有效的。

2.从webproject调用Api(localhost:82/api/..)也可以，所以为WebApi启用了CORS。

Answer 1

我知道您的问题已在评论中解决，但我相信了解导致问题的原因以及如何解决这一整类问题很重要。

查看您的代码，我可以看到您不止一次为 Token 端点设置Access-Control-Allow-Origin标头：

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

在GrantResourceOwnerCredentials方法内部：

context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" }); 

看看CORS 规范，这本身就是一个问题，因为：

如果响应包含零个或多个 Access-Control-Allow-Origin 标头值，则返回失败并终止此算法。

在您的场景中，框架两次设置此标头，并了解必须如何实现 CORS，这将导致在某些情况下（可能与客户端相关）删除标头。

以下问题答案也证实了这一点： Duplicate Access-Control-Allow-Origin：*导致COR错误？

出于这个原因，移动呼叫app.UseCors调用后ConfigureOAuth让您的CORS头一次只能设置（因为owin管道在OAuth的中间件中断，并且永远不会达到对微软CORS中间件Token端点）和品牌您的 Ajax 调用正常工作。

为了更好的和全球性的解决方案，你可以尝试再次把app.UseCors的OAuth的中间件调用之前，取出第二个Access-Control-Allow-Origin内侧插入GrantResourceOwnerCredentials 。

Answer 2

按照以下步骤操作，您的 API 将正常工作：

1. 从您的 API 中删除任何代码，如config.EnableCors(), [EnableCors(header:"*"....)] 。

2. 转到 startup.cs 并添加以下行

   app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

之前

    ConfigureAuth(app);

您还需要安装 Microsoft.owin.cors 包才能使用此功能

Answer 3

不使用app.UseCors()解决问题

我有同样的问题。 我用了一个Vue.Js客户端axois跨团访问我的REST的API。 在我的 Owin-Api-Server 上，由于与其他 3rd 方组件的版本冲突，我无法添加 Microsoft.Owin.Cors nuget。 所以我不能使用 app.UseCors()方法，但我通过使用中间件管道解决了它。

private IDisposable _webServer = null;

public void Start(ClientCredentials credentials)
{
    ...
    _webServer = WebApp.Start(BaseAddress, (x) => Configuration(x));
    ...
}

public void Configuration(IAppBuilder app)
{
    ...
    // added middleware insted of app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
    app.Use<MyOwinMiddleware>();
    app.UseWebApi(config);
    ...
}

public class MyOwinMiddleware : OwinMiddleware
{
    public MyOwinMiddleware(OwinMiddleware next) :
        base(next)
    { }

    public override async Task Invoke(IOwinContext context)
    {
        var request = context.Request;
        var response = context.Response;

        response.OnSendingHeaders(state =>
        {
            var resp = (IOwinResponse)state;

            // without this headers -> client apps will be blocked to consume data from this api
            if (!resp.Headers.ContainsKey("Access-Control-Allow-Origin"))
                resp.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });
            if (!resp.Headers.ContainsKey("Access-Control-Allow-Headers"))
                resp.Headers.Add("Access-Control-Allow-Headers", new[] { "*" });
            if (!resp.Headers.ContainsKey("Access-Control-Allow-Methods"))
                resp.Headers.Add("Access-Control-Allow-Methods", new[] { "*" });

            // by default owin is blocking options not from same origin with MethodNotAllowed
            if (resp.StatusCode == (int)HttpStatusCode.MethodNotAllowed &&
                HttpMethod.Options == new HttpMethod(request.Method))
            {
                resp.StatusCode = (int)HttpStatusCode.OK;
                resp.ReasonPhrase = HttpStatusCode.OK.ToString();
            }

        }, response);

        await Next.Invoke(context);
    }
}

所以我创建了自己的中间件并操纵了响应。 GET 调用只需要 Access-Control-Allow 标头，而对于 OPTIONS 调用，我还需要操作 StatusCode，因为 axois.post() 在发送 POST 之前首先使用 OPTIONS-method 调用。 如果 OPTIONS 返回 StatusCode 405，则永远不会发送 POST。

这解决了我的问题。 也许这也可以帮助某人。