AngularJS requesting http from https on POST

Question

I have website where I'm trying to login over https with an AngularJS controller. Every time I try to log in I get a message like this

Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://example.com/'. This request has been blocked; the content must be served over HTTPS."

The site is running on nginx configured to redirect everything to https.

Here is my controller code.

app.controller("LoginCtrl", function ($scope, $http, $window) {
$scope.formData = {};
$scope.remember_me = false;

$scope.doLogin = function(){

    var xsrf = $scope.formData;

    $http({
      url: "/login",
      method: "POST",
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
            if (obj.hasOwnProperty(p)){
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            }
        return str.join("&");
      },
      data: xsrf
    }).success(function(data) {
        if( $window.location.pathname == '/login') {
            $window.location.href = '/';
        }
        else{
            $window.location.reload();
        }
    }); 
}

    $scope.doJsonLogin = function(){

    var xsrf = $scope.formData;

    $http.post('/', { 'u': $scope.formData.username, 'p': $scope.formData.password, 'c': $scope.remember_me }).success(function(data) {
        if( $window.location.pathname == '/login') {
            $window.location.href = '/';
        }
        else{
            $window.location.reload();
        }
    }).error(function (data, status, headers, config) {
        console.log(data);
        console.log(status);
        console.log(headers);
        console.log(config);
        alert("failed!");
    });
}
});

My backend is running on Flask, and everything seems to be working properly on that part.

Currently it will stall like it failed, but when I reload the homepage it has me successfully logged in.

Why is AngularJS pushing XMLHttpRequest to http when everything was loaded through https, and how do I fix it so it works properly?

Do you see any https related headers in the request on initial login? — mindparse
The Request URL, and all the provisional headers show https I'm not sure how to capture the entire request from angularjs. — JoeS.
This issue could clarify it: MixedContent when I'm loading https page through ajax, but browser still thinks it's http — Danil

JoeS. JoeS. · Accepted Answer · 2015-02-12T17:36:42

I just figured out my problem. In my backend Flask was previously setup to do the redirects itself upon success, which meant it wasn't properly returning a response to angularjs $http.post() that the login was successful. Once I rewrote my returns inside python to respond with json return jsonify({'success': False, 'msg': "Username or Password is invalid"}) or return jsonify({'success': True, 'msg': "Logged in successfully"}) the angularjs requests worked properly.

AngularJS requesting http from https on POST

1 Answers