How to retrieve JSON data from Angular request to access another domain's resources?

Question

I have a strange problem that I have been working on for a couple of days. The problem is related to Cross-Origin Resource Sharing(CORS), I am making an Angular GET request and able to see in the developer tools of Firefox/Chrome that JSON response body is received, however JavaScript (or the browser, or the server) is refusing to hand me the response body. Here is my request:

$http = angular.injector(["ng"]).get("$http"); //angular http object
 $http = angular.injector(["ng"]).get("$http"); 
    $http({
      method: 'GET',
      url: 'api.example.com/myPath',
      headers: {
        'Content-Type': 'application/json',

      }
    }).then(function successCallback(response) {
  
      alert("succeed: db "+JSON.stringify(response)); //this is not called
    

    }, function errorCallback(response) {
      alert("failed: " + JSON.stringify(response));//this is called
    });

As mentioned in the comments the fail function is called not the success. I can mention/post the Stack-overflow and other links that I have been to here, but there are like 50 of them, so here are some of them:

Headers I have tried (beside what shown in the code):

"headers": {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Origin': '*'
      }


"headers": {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Origin': '*'
      }

"headers": {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Origin': '*'
      }


"headers": {
        'Accept': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Origin': '*'
      }


"headers": {
        'Accept': 'application/json',
        'Access-Control-Allow-Origin': '*'
      }

Tried all the above, some of them will not receive JSON response, instead the Send OPTIONS request and stop.

This is what Firefox output looks like:

Network

Console

And here is the Alert function output :

failed: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"api.example.com/myPath","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"","xhrStatus":"error"}

Other things I tried: Installing Plugin for Chrome called CORS : Was not effective at all, no difference

Note The Endpoints server is not NodeJS, It is Java, Most of the answers I have come across online suggest adding these headers at the server, but my colleagues insist that this problem can be solved using front-end Angular (Especially after they saw that the correct response body Json information is actually coming from the server as shown in the pictures attached)

if u can see it in the browser then it means the backend is good and there is not a cors prob — Omar, Jun 08 '18 at 17:18
not sure which version I am using because I installed it using NPM, I am using this package : https://www.npmjs.com/package/angular and then include the file path in HTML — stack-HMA, Jun 08 '18 at 17:56

Marcus Höglund · Answer 1 · 2018-06-08T17:36:19.240

0

If you are using Angularjs version >= 1.4 , do it like this (notice the catch)

$http({
  method: 'GET',
  url: 'api.example.com/myPath',
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  }
}).then(function(response) {
  alert("succeed: db "+JSON.stringify(response)); //this is not called

}).catch(function(response) {
  alert("failed: " + JSON.stringify(response));//this is called
});

edited Jun 08 '18 at 17:36

answered Jun 08 '18 at 17:30

Marcus Höglund

16,172
11
47
69

I already tried that, did not make a difference, not sure which version I am using because I installed it using NPM, I am using this package : https://www.npmjs.com/package/angular and then include the file path in HTML – stack-HMA Jun 08 '18 at 17:56

score 0 · Answer 2 · answered Jun 08 '18 at 18:44

0

Try this

$http.get('api.example.com/myPath').then(
  function(res){ 
    alert('success')
    },
   function(err){
     alert(err)
  })

answered Jun 08 '18 at 18:44

T. Sardelis

79
5

alert box outputs the error (added JSON.stringify(err) ) : {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"api.example.com/myPath'","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"","xhrStatus":"error"} – stack-HMA Jun 08 '18 at 19:02

score 0 · Accepted Answer · answered Jun 11 '18 at 15:47

It turned out that there is no Fix from front-end only, the browser is handing me back the JSON response data only after the Java endpoint added response headers, in NodeJS I had it working fine before with the following addition:

 request(options, function(err, response, body) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.json(response);
  })

I am not sure how that is done in Java but that's basically what they did, just added these things to Java Web-service. It is like the Java server (although sending JSON response to the browser)was telling the browser ("Do not hand him the data because I do not have such instructions on my end"). it is a bit comical I guess but that is what it was.

How to retrieve JSON data from Angular request to access another domain's resources?

3 Answers3