状态200 OK（），角度承诺引发错误—否'Access-Control-Allow-Origin'

Question

First of all, cors is enabled and working in webapi, i can confirm this by doing a post/get request from another controller without problems, whenever is disable cors i can no longer post/get data from the server. This is also true for the token, as soon as i disable the cors on the webapi i do not get a valid response. But for now i do get a valid response.

I'm trying to get a token from the web API. I use the angular resource and a promise. In fiddler i can see status 200, so i'm getting a token back, the JSON says bearer token = x so everything seems fine. Postman is also working. But when i look into the debug console, i see that the promise is throwing an error, even tho fiddler and postman both show me a valid JSON file and a status 200.

// Controller
.controller('LoginCtrl', ['$scope', 'Token', function ($scope, Token) {
    $scope.login = function () {Token.save('username=test123@test.com&password=Test123!!&grant_type=password')
            .$promise.then(function (response) {
            console.log(response);
        });
    };
}]);

And in my factory

.factory('Token', ['$resource', function ($resource) {
    return $resource(baseUrl + 'token', null, {
        save: {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Accept': '*/*'
            },
        }
    });
}]);

the response i get in Developer tools console is

Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","headers":{"Content-Type":"application/x-www-form-urlencoded","Accept":" / "},"data":"username=test123@test.com&password=Test123!!&grant_type=password","url":" http://localhost:55126/token "},"statusText":""}

I'm 100% sure i'm getting a valid JSON object from the /token call. Thanks in advance.

---

Update

XMLHttpRequest cannot load localhost:55126/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:9000'; is therefore not allowed access. angular.js:14642 –

Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"POST","transfor‌​mRequest":[null],"tr‌​ansformResponse":[nu‌​ll],"jsonpCallbackPa‌​ram":"callback","hea‌​ders":{"Content-Type‌​":"application/x-www‌​-form-urlencoded","A‌​ccept":"/"},"data":"‌​username=test123@tes‌​t.com&password=Test1‌​23!!&grant_type=pass‌​word","url":"localho‌​st:55126/token";‌​},"statusText":""}

These 2 error lines pop up just after each other

Answer 1

The solution seems te be CORS related. Even tho i installed NuGet Microsoft.AspNet.WebApi.Cors and used:

config.EnableCors(new EnableCorsAttribute(" ", " ", "*"));

This helped for the 'normal' controller request, whenever requesting a token i found out that i had to install NuGet Microsoft.Owin.Cors and use:

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

In the web api config section of the app. Thanks for helping.