angular.js http post 到 MVC 异步 Task<ActionResult> web 方法失败

Question

我正在尝试从 Angular 客户端调用 MVC 控制器（例如登录）中的异步方法，但调用失败。我也用谷歌邮递员工具试过。

    //
    // POST: /Account/Login
    [HttpPost]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)
    {
        if (!ModelState.IsValid)
        {
            return View(model);
        }

        // This doesn't count login failures towards account lockout
        // To enable password failures to trigger account lockout, change to shouldLockout: true
        var result = await SignInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, shouldLockout: false);
        switch (result)
        {
            case SignInStatus.Success:
                return RedirectToLocal(returnUrl);
            case SignInStatus.LockedOut:
                return View("Lockout");
            case SignInStatus.RequiresVerification:
                return RedirectToAction("SendCode", new { ReturnUrl = returnUrl, RememberMe = model.RememberMe });
            case SignInStatus.Failure:
            default:
                ModelState.AddModelError("", "Invalid login attempt.");
                return View(model);
        }
    }

这是调用 Login 方法的 Angular 服务的 sn-p

        var loginUser = function (email, password, returnUrl) {
            var req = {
                method: 'post',
                url: '/Mysite/Login',
                headers: {
                    'Content-Yype': undefined
                },
                data: {
                    model: {
                        Email: email,
                        Password: password,
                        RememberMe: false
                    },
                    returnUrl: returnUrl
                }
            };
            return $http(req)
                .then(function (response) {
                    return response.data;
                }, function (reason) {
                    return reason;
                });
        };

响应向我抛出状态 500 的内部错误。

angular.js 是否支持对 web 方法的异步调用？

感谢您的帮助

Answer 1

如果您使用 [ValidateAntiForgeryToken] 装饰器，则该操作需要在 post 数据中传递请求验证令牌。

您可以删除 [ValidateAntiForgeryToken] 但这会使您的操作对被篡改的请求开放。

另一种选择是向页面添加防伪令牌，然后在请求中传递其值。

您的 razor 视图需要一个包含令牌的表单（注意：这只是一个允许将令牌添加到页面的虚拟表单）。

@using(Html.BeginForm("Login", "ControllerName", FormMethod.Post, new { id = "verification-form"}) {
    @Html.AntiForgeryToken()
}

在你的javascript中，你可以传递它的值

        var loginUser = function (email, password, returnUrl) {
            var req = {
                method: 'post',
                url: '/Mysite/Login',
                headers: {
                    'Content-Type': undefined
                },
                data: {
                    model: {
                        Email: email,
                        Password: password,
                        RememberMe: false
                    },
                    __RequestVerificationToken: $("#verification-form input[name=__RequestVerificationToken]").val(),
                    returnUrl: returnUrl
                }
            };
            return $http(req)
                .then(function (response) {
                    return response.data;
                }, function (reason) {
                    return reason;
                });
        };