通过AJAX登录，在MVC + Angular中使用cookie。 CORS

Question

我必须从API部分分离aspnetboilerplate（Asp.Net MVC + AngularJS前端）Web并同时验证AngularJS + ASP.Net MVC中的用户。这适用于单个域。 API在另一台服务器上托管时不起作用。

我的MVC AccountController动作登录：

AuthenticationManager.SignIn(new AuthenticationProperties { IsPersistent = rememberMe }, identity);
return Json(new AjaxResponse {Success = true, TargetUrl = Request.ApplicationPath });

我的Login.js文件：

    $("#LoginButton").click(function(e) {
        e.preventDefault();
        abp.ui.setBusy(
            $("#LoginArea"),
            abp.ajax({
                url: "http://internallyAccesibleServer/Account/Login",
                //url: abp.appPath + "Account/Login",
                type: "POST",
                crossDomain: true,
                data: JSON.stringify({
                    tenancyName: $("#TenancyName").val(),
                    usernameOrEmailAddress: $("#EmailAddressInput").val(),
                    password: $("#PasswordInput").val(),
                    rememberMe: false
                })
            })
            .done(function(response) {
                abp.message.info("Login succeeded");})
            .fail(function(data) {
                abp.message.error(data.details, data.message);
            })
        );
    });

当我在hxxp：// internalAccesibleServer /上运行它时 - 登录成功，我可以通过AngularJS访问授权的resurces。如果我从任何其他人那里运行相同的Login.js代码 - 我看到一段“登录成功”消息（我在内部可见服务器上看到数据库/日志记录 - 所以AJAX请求工作正常）然后是HTTP响应302 ，女巫是由MVC框架从401转换而位置标题中的URL是“hxxp：// otherserver / account / login” - 所以请求的来源。

关于CORS的我的Web.config：

<httpProtocol>
    <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
       <add name="Access-Control-Allow-Methods" value="GET, POST, HEAD, OPTIONS" />
       <add name="Access-Control-Allow-Headers" value="Content-Type, x-xsrf-token" />
    </customHeaders>
 </httpProtocol>  

我相信这与AJAX和MVC之间的cookie共享有关。有人可以帮助我克服这个问题，或者我应该开始在没有任何MVC Razor视图的情况下在完整的Angular中重写GUI并使用其他身份验证类型，如Bearer？已经使用Razor视图开发了完整的应用程序:-(

我已阅读所有相关的forum.aspnetboilerplate.com消息，但这个确切的问题没有答案。很抱歉，如果链接过期 - 添加主题名称以供参考。

分布式WEBAPI和MVC站点hxxps：//forum.aspnetboilerplate.com/viewtopic.php？f = 2＆t = 871

部署ABP ON 3 TIER hxxps：//forum.aspnetboilerplate.com/viewtopic.php？f = 2＆t = 2376

3层部署。应用程序中的SEPARATE GUI hxxps：//forum.aspnetboilerplate.com/viewtopic.php？f = 2＆t = 3301

非常相似的问题（但没有解决方案）：hxxps：//stackoverflow.com/questions/43747413/sending-cookie-cross-domain-with-cors-using-jquery-hosted-with-mvc-troubleshoo

我也试过没有运气在.Web层实现我自己的WebClient并向后续的AJAX调用公开一个cookie。让AJAX调用在浏览器中进行身份验证的最佳方法是什么？

附：这是我的OWIN启动配置解决auth：

        app.UseCookieAuthentication(new CookieAuthenticationOptions
        {
            AuthenticationMode = AuthenticationMode.Active,
            CookieHttpOnly = false,
            AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
            LoginPath = new PathString("/Account/Login"),
            LogoutPath = new PathString("/Account/Logout"),
            Provider = new CookieAuthenticationProvider
            {
                OnApplyRedirect = ctx =>
                {
                    if (!IsAjaxRequest(ctx.Request))
                    {
                        ctx.Response.Redirect(ctx.RedirectUri);
                    }
                }
            }
        }); 

我会非常感谢任何答案。

Answer 1

按照这里的步骤：

在ASP.NET Web API 2中启用跨源请求

https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

全局启用CORS上述方法还可用于跨API启用，而无需为每个控制器添加注释：

public static void Register(HttpConfiguration config)
{
    var corsAttr = new EnableCorsAttribute("http://example.com", "*", "*");
    config.EnableCors(corsAttr);
}

Answer 2

我认为这里的问题是cookie不会发送到浏览器。要解决这个问题，首先需要添加以下标头，告诉浏览器公开对前端JS代码的响应。

<add name="Access-Control-Allow-Credentials" value="true" />

然后在您登录JS代码时需要使用

XMLHttpRequest.withCredentials

使用cookie启用跨站点请求的属性。你可以这样做：

$.ajax({
        url: "http://internallyAccesibleServer/Account/Login",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify({
            tenancyName: $("#TenancyName").val(),
            usernameOrEmailAddress: $("#EmailAddressInput").val(),
            password: $("#PasswordInput").val(),
            rememberMe: false
        }),
        xhrFields: {
            withCredentials: true
        }

关于重定向。根据ABP documentation，如果在响应上设置了targetUrl属性，那么它将重定向到它。