0

I am trying to debug my angular app with chrome dev console.I want to send a get request to a local server from angular. I've tried the following:

$http = angular.element($0).injector().get('$http');
$base64 = angular.element($0).injector().get('$base64');

var auth = $base64.encode("user:passwd");
var authHeaders = {"Authorization": "Basic " + auth,"Access-Control-Allow-Origin":"*"};

$http.get("url",{headers:authHeaders,method:"GET"})

After reading this answer: https://stackoverflow.com/a/30296149/1496826

I thought that custom header is the problem. So, I tried putting the authorization headers in the body:

$http.get("url",{data: {"Authorization": "Basic " + auth,"Access-Control-Allow-Origin":"*"},method:"GET"})

But I am still getting the same error:

XMLHttpRequest cannot load "url". No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401.

This same get request works fine from Postman:

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "url",
  "method": "GET",
  "headers": {
    "authorization": "Basic bWdhcasdasd",
    "cache-control": "no-cache",
    "postman-token": "XXXXXX-XXXXXX-xXXXX-xXXXX"
  }
}

I have tried several other variation like - $http default / common header etc. but everything failed. Please help.

Community
  • 1
  • 1
Mohit
  • 1,859
  • 1
  • 16
  • 25
  • Have you tried a simple request without authentification to see if it works? Like: $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { }, function errorCallback(response) { }); – ukn May 17 '17 at 15:54

1 Answers1

0

this is a CORS issue.

CORS headers must be handled server side, i don't see your server side code here but in order to let this error disappear you must specify which domain are allowed to request resources.

the exception is caused by the browser that intercept the server response check the headers and if it doesn't find the Allow-Control-Allow-Origin header it won't forward the response to your code (this happens only for cross origin request).

This is why Postman let you see the response, because it doesn't do what chrome does, doesn't make any check.

As i said the correct solution is to fix your server side code and specify the Allow-Control-Allow-Origin header , alternatively a quick but temporary workaround is to install this plugin for chrome that will intercept the server response and add the Allow-Control-Allow-Origin to * (means any domain) this trick will fool chrome and make you see the response.

Karim
  • 8,454
  • 3
  • 25
  • 33
  • I dont have access to the server-side code. It is a django application maintained by someone else. the plugin solution is not feasible as I can't ask every user to install that. Please suggest some alternative which can be implemented from client side – Mohit May 17 '17 at 17:24
  • Unfortunately there's no solution. You have to get in touch with the server side manteiner and ask him to add a wildcard for your domain in the header . If you look for cors related issues all over the web you'll find that this topic is often encountered but the solution is to set the correct header in the response, this is only done server side. – Karim May 17 '17 at 17:51