0

I have an MVC app using AngularJS. We do not use WebAPI. So, the angularJS would just be calling the MVC Controllers. These calls work fine in IE & Chrome. However, in Firefox and Safari I tried for hours to get it up and running without any result. As you can see in the code below, I do have a LoginController.js file and LoginService.js file. The service.js file returns a promise object back to the controller. In firefox on error the data is null, headers are emptry, statusText is empty and status is -1. I do not see if this has anything to do with CORS. But I do not have any cors going on in here as the service just calls the MVC Controller.

LoginController.JS file

   app.controller('LoginController',
    function ($scope, LoginService) {
        $scope.schoolList = null;
        $scope.SelectedDistrictId = null;
        $scope.isFLUser = $("#isFLUser").val();
        $scope.User =
        {
            userName: "",
            password: "",
            Email: null,
            firstName: "",
            lastName: "",
            roleId: null,
            districtId: null,
            schoolId: null,
            districtName: "",
            schoolName: "",
            isFL: $("#IsFL").val()
        }
        $scope.validateUser = function () {
            $("#LoginErrorSpan").hide();
            var form = $('form');
            $.validator.unobtrusive.parse(form);
            if (form.valid()) {
                $("#spinnerdiv").show();
                debugger;
                var promise = LoginService.validateUser($scope.User);
                promise.then(function (result) {
                    debugger;
                    $("#spinnerdiv").hide();
                    if (result.data.InvalidUser === false) {
                        if (result.data.PwdchangeCount > 0) {
                            window.location.href = "/Login/Welcome";
                        }
                        else {
                            window.location.href = "/Login/ChangePassword";
                        }
                    } else {
                        $("#LoginErrorSpan").show();
                    }
                },
                    function (result) {
                        debugger;
                        console.log(result.headers());
                    });
            }
        }
    });

LoginService.JS File

var app = angular.module('app', []);
app.factory('LoginService',
    function ($http) {
        return {
            validateUser: function (scopeUser) {
                return $http({
                    url: "/Login/ValidateUser",
                    method: "GET",
                    params: {
                        userName: scopeUser.userName,
                        //password: encodeURIComponent(scopeUser.password),
                        password: scopeUser.password,
                        isFL: scopeUser.isFL
                    }
                });

            }
        }
    });

I have been trying to debug this for the last 8 hours with all the solutions I could find online. Firebug

Cupid
  • 48
  • 2
  • 10
  • Have you tried calling the LoginService directly from a browser? There might be an error message. If data is null, it could be that the response from MVC was not valid Json. – Simmetric Jan 11 '17 at 22:18
  • The same service is being called in IE and Chrome and I get the data back. – Cupid Jan 11 '17 at 22:25
  • I did read a lot of such errors online however most of them have to do with cors. Does angular treat the call to the mvc controller as such? – Cupid Jan 11 '17 at 22:27

1 Answers1

0

Maybe if you are just opening html documents directly from the browser, to fix this you will need to serve your code from a webserver and access it on localhost. Open that file by an IDE (Visual studio, Eclipse etc) as a web site project.

AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

Community
  • 1
  • 1
Mecit Semerci
  • 191
  • 1
  • 8