AngularJS: OPTIONS preflight call preceding a $http.post request

[Shaun Lim]

Question is here:

http://stackoverflow.com/questions/20671619/angularjs-options-preflight-call-preceding-a-http-post-request

Just hoping to get more pairs of eyes on this; I've been stuck for days.

Thanks,

Shaun

[Sander Elias]

Hi Shaun,

Are you absolutely sure it never reaches the server? How did you check? What server are you using, and is it correctly configured to handle CORS?

[Shaun Lim]

Hi Sander,

Thanks for your reply. I'm using HAPI (Walmart Labs) for my backend, and have a listener that is fired whenever a request is received. That listener never fires for that OPTIONS call.

My server is configured correctly, and a curl gives the right response:

curl -X OPTIONS -ik 'https://localhost:3001/authenticate' -H "Origin: https://localhost:8001"
HTTP/1.1 200 OK
content-type: application/json; charset=utf-8
content-length: 2
cache-control: no-cache
access-control-allow-origin: *
access-control-max-age: 86400
access-control-allow-methods: GET, HEAD, POST, PUT, DELETE, OPTIONS
access-control-allow-headers: Authorization, Content-Type, If-None-Match, Access-Control-Allow-Headers, Content-Type
access-control-expose-headers: WWW-Authenticate, Server-Authorization
set-cookie: session=Fe26.2**94705d49717d1273197ae86ce6661775627d7c6066547b757118c90c056e393b*2KYqhATojPoQhpB2OwhDwg*W9GsJjK-F-UPqIIHTBHHZx1RXipo0zvr97_LtTLMscRkKqLqr8H6WiGd2kczVwL5M25FBlB1su0JZllq2QB-9w**5510263d744a9d5dc879a89b314f6379d17a39610d70017d60acef01fa63ec10*pkC9zEOJTY_skGhb4corYRGkUNGJUr8m5O1US2YhaRE; Secure; Path=/
Date: Wed, 18 Dec 2013 23:35:56 GMT
Connection: keep-alive

[Sander Elias]

Hi Shaun,

Did you try a debugging proxy? like http://fiddler2.com/ or http://httpkit.com/wiretap or http://www.charlesproxy.com/

Those will help you track down the problem. I highly doubt that this is an AngularJS issue.  Perhaps you somehow have stumbled upon a browser issue, but most of the times this kind of problem lies in the communication/server realm. 

Can you reproduce your problem inside a plunk? If you, I'm happy to take a look at it. 

Regards

Sander

[Shaun Lim]

Hi Sander,

My $httpProvider configuration:

App.config(['$httpProvider', function ($httpProvider) {

    $httpProvider.defaults.useXDomain = true;

    //$httpProvider.defaults.headers.common = {};

    console.log('logging out headers');

    console.log($httpProvider.defaults);

    console.log($httpProvider.defaults.headers.common);

    console.log($httpProvider.defaults.headers.post);

    console.log($httpProvider.defaults.headers.put);

    console.log($httpProvider.defaults.headers.patch);

    console.log('end logging out headers');

    $httpProvider.defaults.headers.common = {Accept: "application/json, text/plain, */*"};

    $httpProvider.defaults.headers.post = {"Content-Type": "application/json;charset=utf-8"};

    console.log('after: logging out headers');

    console.log($httpProvider.defaults.headers.common);

    console.log($httpProvider.defaults.headers.post);

    console.log($httpProvider.defaults.headers.put);

    console.log($httpProvider.defaults.headers.patch);

    console.log('after: end logging out headers');

    $httpProvider.interceptors.push(function ($location, $injector) {

        return {

            'request': function (config) {

                console.log('in request interceptor!');

                var path = $location.path();

                console.log('request: ' + path);

                //injected manually to get around circular dependency problem.

                var AuthService = $injector.get('AuthService');

                console.log(AuthService);

                console.log(config);

                if (!AuthService.isAuthenticated() && $location.path() != '/login') {

                    console.log('user is not logged in.');

                    $location.path('/login');

                }

                //add headers

                console.log(config.headers);

                return config;

            }

        };

    });

}]);

Where the $http.post call is made:

App.services.factory('AuthService', function ($http, $location, $q) {

    var currentUser;

    return {

        authenticate: function (email, password) {

            //promise to return

            var deferred = $q.defer();

            var authRequest = $http.post('https://' + $location.host() + ':3001/authenticate', {email: email, password: password});

            authRequest.success(function (data, status, header, config) {

                currentUser = data;

                console.log('currentUser in service set to:');

                console.log(currentUser);

                //resolve promise

                deferred.resolve();

            });

            authRequest.error(function (data, status, header, config) {

                console.log('authentication error');

                console.log(status);

                console.log(data);

                console.log(header);

                console.log(config);

                //reject promise

                deferred.reject('authentication failed..');

            });

            return deferred.promise;

        },

        isAuthenticated: function () {

            return currentUser !== undefined;

        }

    };

});

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/cABqZw7SHYo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.