Status 200 OK(), angular promise throws error -- No '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('[email protected]&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":"[email protected]&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

Status of -1 usually means a CORS problem. The browser has blocked the XHR because it violates Same Origin Policy. — georgeawg
– georgeawg, Commented Aug 10, 2017 at 0:26
If it was a CORS problem i should not be able to get data at all. I do get a (good) response from the server, the promise is just not waiting for the answer to complete. I'm also using CORS on the backend with Origin *, so that should be fine. — Michael Beuving
– Michael Beuving, Commented Aug 10, 2017 at 5:57
Is the 200 response for the OPTIONS pre-flight request? Maybe the actual POST is being blocked after that? What does the network tab of the Developer Console show? — georgeawg
– georgeawg, Commented Aug 10, 2017 at 6:25
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 — Michael Beuving
– Michael Beuving, Commented Aug 10, 2017 at 6:33
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":"[email protected]&password=Test123!!&grant_type=password","url":"localhost:55126/token"},"statusText":""} — Michael Beuving
– Michael Beuving, Commented Aug 10, 2017 at 6:33

Michael Beuving · Accepted Answer · 2017-08-11 07:08:12Z

0

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.

answered Aug 11, 2017 at 7:08

Michael Beuving

1192 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Status 200 OK(), angular promise throws error -- No 'Access-Control-Allow-Origin'

Update

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related