Search code examples
javascriptangularjsxmlhttprequest

XMLHttpRequest cannot load Response to preflight request doesn't pass access control check


In my Angular app below is the error I'm getting when I try to login while developing locally (Chrome):

XMLHttpRequest cannot load https://www.tickertags.com/app/api/login. 
Response to preflight request doesn't pass access control check: 
The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8100'
that is not equal to the supplied origin.
Origin 'http://localhost' is therefore not allowed access.

The login function from my loginController

function login(credentials) {
    console.log('credentials',credentials);
    AuthFactory.login(credentials).then(function (user) {
        $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
        $scope.setCurrentUser(user);

        if (user.password_reset) {
            $location.path('/password');
        } else {
            $location.path('/tickers');
        }
    }, function () {
        console.log('"Invalid Username/Password"');
        $scope.loginData.message = "Invalid Username/Password";
        $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
    }, function () {
        console.log('"Invalid Username/Password"');
        $scope.loginData.message = "Invalid Username/Password";
        $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
    });
}

The AuthFactory.login function hits an API that is hosted on production. I'm not sure what I'm missing? This is what my localhost link looks like http://localhost/static/manage/v2/#/login


Solution

  • Hope this helps someone else who is running into this problem, and can't access anything on the server side.

    I figured out my problem, I was trying to hit an absolute path with my API call to login ie: www.tickertags.com/api/... instead of just /api/... that fixed it.