AngularJS $ http.post请求已被Chrome取消 [英] AngularJS $http.post request is canceled by Chrome

问题描述

我一直在谷歌搜索这几个小时......

I've been googling this for hours...

这是我的angularJS代码：

here's my angularJS code:

var FrontControllers = angular.module('FrontControllers', [] );

FrontControllers.controller('LoginController', ['$scope', '$http', function($scope, $http){

    $scope.user = {};

    $scope.login = function() {
        console.log($scope.user);
        $http({
            url: '/webapi/login',
            method: 'POST',
            data: $scope.user
        }).success(function (data) {
            alert("success!");
        }).error(function(data) {
            alert("failed =(");
        });

    };
}]);

这是附带的html

<div ng-controller="LoginController" id="login" class="box">

    <form novalidate role="form" action="/webapi/login" id="loginForm">                   
        <label for="signin" class="sr-only">Email or Username</label> 
        <input ng-model="user.username" type="text" autofocus class="form-control input-lg" id="username" name="username" size="20" placeholder="email or username">

        <label for="password" class="sr-only">Password</label> 
        <input ng-model="user.password" type="password" class="form-control input-lg" id="password" name="password" size="10" placeholder="password">

       <button ng-click="login()" type="submit" class="btn btn-lg btn-bright btn-block">Login</button>
    </form>

</div>

无论我做什么，我最终都会收到取消的POST请求。我以前成功使用标准的jQuery ajax代码登录/ webapi / login。服务器配置为AJAX，因此不需要urlencode标头。 Payload看起来正确，与jQuery ajax发送的相同。

No matter what I do, I end up with a POST request that gets cancelled. I've previously succeeded in logging in to /webapi/login with standard jQuery ajax code. The server is configured for AJAX, so there's no need for a urlencode header. The Payload looks correct, identical to the one that sent by jQuery ajax.

可能是什么问题？

这是来自Chrome开发者/网络：

This is from Chrome developer/network:

Provisional headers are shown
Accept:application/json, text/plain, */*
Content-Type:application/json;charset=UTF-8
Origin:http://ec2-54-86-242-50.compute-1.amazonaws.com
Referer:http://ec2-54-86-242-50.compute-1.amazonaws.com/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.104 Safari/537.36
X-DevTools-Emulate-Network-Conditions-Client-Id:BB96CDC3-AD63-D024-E814-4726DF4843D8

推荐答案

如果 action 参数，Angular将不会 preventDefault（）已设定。请参见此处

Angular will not preventDefault() if the action parameter is set. See here

出于这个原因，Angular会阻止默认操作（表单提交到服务器），除非该元素指定了action属性。

For this reason, Angular prevents the default action (form submission to the server) unless the element has an action attribute specified.

你应该也可以在< form> 上使用 ng-submit =login（）而不是 ng-click ，以便在用户按Enter键时提交表单

You should probably also use ng-submit="login() on the <form> instead of ng-click, so that it will submit the form when the user presses Enter

这篇关于AngularJS $ http.post请求已被Chrome取消的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！