Http.post No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

So I'm trying to call a http.post request from angular to my MVC Account controller to execute the externallogin method. I keep getting the error "No 'Access-Control-Allow-Origin' header is present on the requested resource." So I did a bit of digging and it seems it has something to do with CORS.

 var chrome = 100;
    var width = 500;
    var height = 500;
    var left = (screen.width - width) / 2;
    var top = (screen.height - height - chrome) / 2;
    var options = "status=0,toolbar=0,location=1,resizable=1,scrollbars=1,left=" + left + ",top=" + top + ",width=" + width + ",height=" + height;
    window.open("about:blank", "login-popup", options);

    authService.externalLogin(provider, returnUrl).then(function (response) {

    })

var _externalLogin = function (provider, returnUrl) {
    _logOut();
    var deferred = $q.defer();
    $http.post(
'/Account/ExternalLogin', {
    provider: provider,
    ReturnUrl: returnUrl
}).success(function (response) {
deferred.resolve(response);}).error(function (err, status) {
_logOut();
deferred.reject(err);});
    return deferred.promise;
};

So this goes into the controller and creates the corresponding path. But then when it finishes the method it produces the error without redirecting the open window.

I tried implementing the CORS using http://www.html5rocks.com/en/tutorials/cors/ but nothing changed. Could someone explain how to fix this?

Answer 1

Try setting some headers on your post request. For example some customization you can do:

app.run(function ($http) {
  // Sends this header with any AJAX request
  $http.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
  // Send this header only in post requests. Specifies you are sending a JSON object
  $http.defaults.headers.post['dataType'] = 'json'
});

Hope this helps!

EDIT: The following seemed to work (read comments below):

$http({ 
  url: '/Account/ExternalLogin', 
  dataType: 'json', 
  method: 'POST', 
  data: { 
    provider: provider, 
    ReturnUrl: returnUrl 
  }
});