Getting error information from $http.get and $http.jsonp requests - angularjs

I'm trying to call an endpoint using $http.get but the call fails each time. The error status just returns -1.
How can I get a more detailed error message?
Maybe I'm making some mistake in my JavaScript but I seem to be able to call other end points fine. The request that fails for me is:
$http.get("http://www.bloomberg.com/markets/api/security/currency/cross-rates/EUR,AUD")
.success(function (data) {
alert(data);
return data;
}).error(function (status){
alert("Error status : " + status);
});

It seems that the Bloomberg API doesn't include the Access-Control-Allow-Origin header in their response. This makes it impossible for an Angular web based app to access the API since most browsers respect CORS:

If it is a CORS issue as Nasreddine suggested then you can use a CORS plugin in google chrome for testing purposes. It will get resolved when you host it in a server.
Coming to your Question a response of -1 usually indicates a timeout of request/ Server not responding.

Related

Rest api returns "Network connection Failure" in chrome but working fine in firefox

Maximum time my rest api fails and some times it works in chrome but it always works in firefox.
when calling api old data is coming in response.
Cors is also enabled with proper rule.
As per my observation it started happening after recent chrome update on 2nd sept,2017.
Technology used :- Java,Angularjs
Below is the error I get when api fails :-
XMLHttpRequest cannot load . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access. The response had HTTP status code 403.
Get Api code :-
executeGet: function () {
var deferred = $q.defer();
$http({
url: REST_API.SERVICE_BASE_URL + encodeURI(this.restURI),
method: 'GET',
timeout: 2000,
cache: false,
headers: {'Content-Type': 'application/json'},
withCredentials: true,
}).then(function (response) {
deferred.resolve(response.data, response.status, response.headers, response.config);
$log.debug( 'URL - '+ url_called, response.data, response.status);
},function (response) {
deferred.reject(response.data, response.status, response.headers, response.config);
$log.debug( 'URL - '+ url_called, response.data, response.status);
});
return deferred.promise;
},
Thanks in advance.
Sadly it's impossible to help you from this description. It's nothing to do with being a REST API, and it seems likely that the Chrome vs Firefox thing is just a coincidence.
To find out the cause of this missing Access-Control-Allow-Origin you need to debug your application like you would anything else. This can be done in a few ways.
You can enable New Relic or Data Dog to try to catch errors and other debugging information in an intelligent form, you can use Papertrail, Logentries, etc to see a trail of logs, you can use Rollbar to see just exceptions being fired if that's a bit cheaper than New Relic.
It's very likely that some error is being triggered (validation, auth, something) which is making your application return early, and it's not triggering whatever layer handles CORS. I can't take any guesses at what that might be because you've just put "Java" and we dunno if its Spring, something else or custom.
Best of luck with your debugging!
I faced the same issue, where it was working via Chrome but not when accessing through AngularJS. I was using Spring boot on server side. The solution in my case was to enable Allowing CORS on the server side. In Spring you can enable using WebMvcConfigurer. WebMvcConfigurer enabling CORS
Install in Chrome the extension https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
and enable the cros origin resources

display error message soap request in Angular.js

I'm consuming a web service via SOAP. I work on my project request and get a response expected result. the problem that I have is because I want to know when the request fails.
I want that when the request is not complete either by internet problems, timeout, etc., to be displayed a warning (console.log) stating that there is no internet or "try again." I have tried many things, but only the error is displayed by default console google chrome reporting that no internet or whatever.
the console.log() is never shown the error message console appears only google chrome console.
Not to put all my code, so basically I generate a SOAP request:
$soap.post(url,action,params).then(function(response){
//my code..
});
//.success or .error not works ..
//i need for example:
/*
.error(function(response,status,headers,config) {
console.log("problems with your connection")
});*/
documentation of soap in angular:
https://github.com/andrewmcgivery/angular-soap
sorry for my level of english.
According to the documentation (and the code), the post call returns a promise. That means you should be able to do:
$soap.post(url, action, params).then(
function(response) {
// your code
},
function(reason) {
console.log("Problems with your connection");
}
);
Promise documentation: https://docs.angularjs.org/api/ng/service/$q

AngularJS's $http.post() sends each time two AJAX requests, one without the data and one with

I have a weird problem with AngularJS's $http service which, as far as I can see, no one else has.
Every time I use $http.post() to sent cross domain requests, I can see in the developer tools (network pane) that two different requests are being sent: one, without any data, and immediately after that another one is sent which has all the data and returns with the correct response from the server.
Here's an example:
$http.post(url+'getSiteList.php', {session_id: $scope.session_id(), withCredentials: true})
.success(function(data, status, headers, config) {
console.log(data);
....
Does anyone know what's causing this? I checked the code, and the $http.post method is only being called once.
It's all about how browsers manage CORS. When making a cross-domain request in angular, the browser will automatically make a HTTP OPTIONS request to the specified URL/URI it is called as "pre-flight" request or "promise".
As long as the remote source returns a HTTP status code of 200 and relevant details about what it will accept in the response headers, then the browser will go ahead with the original JavaScript call.

Accept non secure responses from secure $http request in Angular

I am making a $get request to a secure server in Angular. The problem is this is an internal server (which I have no control over) with a bad certificate and as a result I am getting mixed content error messages and my browser is not allowing the response to be displayed for security reasons.
Anything I can do to request data by HTTPS but also make sure I accept a non secure response?
$.get('https://internal.domain.com' + '' + $scope.account, function (data, status) {
_.forEach(data, function (item) {
$rootScope.hotNews.push(item);
});
});
Sadly, I found out its not possible... :(

AngularJS: $http.post throws error

I am using Request Bin to post some data. In my controller, I have the following code:
$http.post('http://requestb.in/redacted', fooBar).
success(function(data) {
$scope.fooBarPostedSuccess = true;
}).
error(function(err) {
console.log("Error while posting to Request Bin");
console.log("Error Info : " + err);
});
This is triggered by means on a button on the UI. Now when this gets triggered, the data is not posted to Request Bin and I get this error:
XMLHttpRequest cannot load http://requestb.in/redacted.
Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
How do I post data to request bin through an AngularJS controller? Also, what does the above error mean?
EDIT : I wish to add here that I am using Node.js with AngularJS. Is this something to do with Node perhaps?
Ah yes... you are dealing with cross-domain scripting issues. This is not an AngularJS problem, but a browser security limitation and a VERY common friction point.
You cannot POST/PUT/DELETE to another domain (different from the one which is hosting -- localhost in your case) without doing some Cross-Origin Resource Sharing (CORS). You are limited to GET for a cross-domain HTTP request.
You have two options:
See if your API supports any cross-domain capabilities. This might be via CORS or it might be via an overloaded GET API or JSONP.
Proxy requests through your server. Since you are using Node.js, proxying REST through your server is extremely simple... you just need to set up a route handler (like /api/redacted) in your Node.js server and then make a new request to your actual API server with something like Restler (NPM package) and return the result back to your client.
Hope this helps!
EDIT:
Your API supports JSONP (Your API Docs). You should be able to use Angular's JSONP function to access your API's JSONP capabilities. (Angular.js JSONP docs).
Since you want to be able to POST to the service, you will need to use the second approach.
CORS allows both GET and POST
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://www.w3.org/TR/cors/
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
Now, that that's out of the way...
I too have found that angular's $http won't let me POST cross domain. I was suspicious about that though because I have jquery ajax calls in other projects that can post cross domain just fine. So, I swapped my $http POST with $.ajax POST and that worked.
// $http({
// url: url,
// method: "POST",
// data: data
// })
// .success(successCallback)
// .error(errorCallback)
// ole reliable
$.ajax({
type : "POST",
url : url,
data : data,
success : successCallback,
error : errorCallback,
cache : false,
dataType : 'json',
})
You can use PutsReq instead of RequestBin. PutsReq supports CORS.

Resources