CODEWITHSUNDEEP
angularjspostcors
idipous
idipous

Reputation: 2910

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

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?

Upvotes: 2

Views: 507

Answers (1)

idipous
idipous

Reputation: 2910

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.

Upvotes: 2

Related Questions