Angular form submitting twice (ajax get request)

Question

I have a controller that for some reason is submitting a form twice via a get request in AngularJs. I can see in my database that the form is being submitted twice, and also in the console network tab, it is logging the two submission, however, the first submission has the "Request Method" of OPTIONS, and the 2nd is GET. I think this may be a clue. I'm a bit confused, because i'm not passing in any 'options' into the get method, just the URL I am submitting to.

Html:

<div class="row">
    <div ng-controller="groupEditCtrl">
        <form class="span11" name="" novalidate ng-submit="createArtifact()">
            <legend>Create a new group</legend>
            <div class="row">
                <div class="span5">
                    <div class="control-group">
                        <div class="controls">
                            <input name="text" type="text" placeholder="Group Name" required ng-model="artifact.group_name" />
                        </div>
                    </div>
                </div>
                <div class="span5">
                    <p>
                        <small>What your artifact will look like:</small><br />
                        {{artifact.group_name}}
                    </p>
                </div>
            </div>

            <input name="token" type="hidden" required ng-model="window.token" />
            <div class="control-group">
                <div class="controls controls-row">
                    <button type="submit" class="btn" value="Submit" title="Submit">
                        <span>Submit</span>
                    </button>
                </div>
            </div>

        </form>
    </div>
</div>

Controller:

'use strict';

function groupEditCtrl($scope, $http, $routeParams, $cookie) {

    $scope.createArtifact = function(){
        var requestURL = window.base_url + "/Group/CreateGroup?callback=JSON_CALLBACK&token=" + window.token + "&group_name=" + $scope.artifact.group_name;
        $http.get( requestURL ).
            success(function(data, status, headers, config) {
                console.log('You have successfully submitted a Cause/CreateCause');
            }).
            error(function(data,status,headers,config){
                console.log('You have FAILED submitting a Cause/CreateCause');
            });
    }
};

Answer 1

A HTTP Options request is asking the server for the allowed methods that it can communicate with the server upon (amongst other things) so it's a normal thing to happen.

The Options request shouldn't change anything in your backend but it may well be logged as you're seeing. Double check that it isn't changing anything (and if it is then your backend may be configured wrong, and you should ask another question if it is!).

There's nothing wrong with your angular setup/use regarding the OPTIONS then GET.

Answer 2

For me headers: {'Content-Type': undefined} Work, And I don't see it call twice again.

$http.post("index.php", {id : $scope.A},{
    headers: {'Content-Type': undefined}})
    .success(function (response) {
       $scope.OK = response.POLL;
    }
}

Answer 3

原来这是我不知道的正在构建的自定义api的问题。