1

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

Michael Beuving
  • 119
  • 1
  • 14
  • Status of -1 usually means a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) problem. The browser has blocked the XHR because it violates [Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). – georgeawg Aug 10 '17 at 00: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 Aug 10 '17 at 05: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 Aug 10 '17 at 06:25
  • XMLHttpRequest cannot load http://localhost:55126/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. angular.js:14642 – Michael Beuving Aug 10 '17 at 06: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":"username=test123@test.com&password=Test123!!&grant_type=password","url":"http://localhost:55126/token"},"statusText":""} – Michael Beuving Aug 10 '17 at 06:33
  • These 2 error lines pop up just after eachother – Michael Beuving Aug 10 '17 at 06:33
  • Possible duplicate of [AngularJS No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/36734865/angularjs-no-access-control-allow-origin-header), Possible duplicate of [How to enable CORS in AngularJs](https://stackoverflow.com/questions/23823010/how-to-enable-cors-in-angularjs), Possible duplicate of [Angular HTTP: Status -1 and CORS](https://stackoverflow.com/a/42880660/5535245), etc. – georgeawg Aug 10 '17 at 11:43
  • Cross domain ? https://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin – pix Aug 10 '17 at 11:54
  • Guys i understand when i'm facing a cross domain error. Point is all other requests from the same website are working, this is the ONLY one not working, at least, it works since i get valid data, the only place it doesnt work is in the angular/js code. So please dont say this is a cross domain issue, ofc it is the first thing i thought after but this doesnt seem to be the problem. – Michael Beuving Aug 10 '17 at 12:23

1 Answers1

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.

Michael Beuving
  • 119
  • 1
  • 14