AngularJS continues to perform preflight request even without application/json content type

Question

At this point I am at a complete loss. I have searched the SO and the documentation and it says that Angular's $http will not perform an OPTION request if you put anything but content-type: application/json

I have the code below:

    $scope.login = function(){

    authFactory.login($scope.username, $scope.password).success(function(){
        alert("here");
    }).error(function(){
        alert("ERROR");
    });


app.factory('authFactory', ['$http', function ($http) {

var factory = {};

factory.login = function (username, password) {

    var data = new Object();
    data.username = username;
    data.password = password;

    return $http({
        method: 'POST',
        url: wsURL + 'login',
        data: data,
        headers: {
            'Content-Type': 'x-www-form-urlencoded'
        }});

 }
return factory;
}]);

I keep getting an OPTIONS request and I cannot do anything about it.

My server is an embedded Jetty who is lacking an web.xml so I had to go at great lengths to configure it. At some point I seemed to work and not send the options request but out of the blue (without changing anything it stopped again).

Any help?

http://stackoverflow.com/questions/11378075/http-method-changes-from-post-to-options-when-changing-content-type see here for some info — SoluableNonagon, Dec 01 '14 at 17:34
Does this mean that since I am adding an X-AUTH-TOKEN header it will always do a preflight? — idipous, Dec 01 '14 at 17:51
hmm this is bad news... It should be a way to circumvent this though... — idipous, Dec 01 '14 at 17:52
No, this should not be circumvented, every browser will be implementing this behavior. See W3: http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html — SoluableNonagon, Dec 01 '14 at 18:01

score 2 · Accepted Answer · answered Dec 01 '14 at 19:52

After all, SoluableNonagon was right that because I was sending a custom header I could not avoid the preflight request to Jetty. However, after searching for a way to make it work.

I am posting here for helping anyone else with similar needs.

The way to make this work with Jetty is to configure the CrossOriginFilter appropriately so as to not chain the request to your application if you do not want this (as was my case). The way to do this is below.

    FilterHolder holder = new FilterHolder(new CrossOriginFilter());
    holder.setInitParameter(CrossOriginFilter.ACCESS_CONTROL_ALLOW_METHODS_HEADER, "GET,POST,HEAD,OPTIONS");
    holder.setInitParameter(CrossOriginFilter.ACCESS_CONTROL_ALLOW_ORIGIN_HEADER,  "*");
    holder.setInitParameter(CrossOriginFilter.ACCESS_CONTROL_ALLOW_CREDENTIALS_HEADER, "true");
    holder.setInitParameter(CrossOriginFilter.ALLOWED_HEADERS_PARAM, "*");
    holder.setInitParameter(CrossOriginFilter.CHAIN_PREFLIGHT_PARAM, "false");
    holder.setInitParameter(CrossOriginFilter.ACCESS_CONTROL_EXPOSE_HEADERS_HEADER, "true");
    holder.setInitParameter(CrossOriginFilter.EXPOSED_HEADERS_PARAM, "X-AUTH-TOKEN");

Notice the statements responsible for allowing the header to pass and stop chaining it to the application are holder.setInitParameter(CrossOriginFilter.ALLOWED_HEADERS_PARAM, "*"); and holder.setInitParameter(CrossOriginFilter.CHAIN_PREFLIGHT_PARAM, "false");.

The last two statements in the codeblock above are responsible for allowing you to retrieve the token from the custom header. Not entirely relevant to the question but will definitely be needed.

AngularJS continues to perform preflight request even without application/json content type

1 Answers1