I would like to know the status code for the error in this function. I currently get this: GET http://localhost:3000/latest-live?lu=1448920013000 net::ERR_EMPTY_RESPONSE
Anyone know if I am handling my error function wrong? I know why I am getting the error, but to better handle the error I would like to know what the status code is (EX: status code 404 not found).
app.factory('getSpreadsheetData', ['$q', '$http', function($q, $http) {
return function getData() {
var deferred = $q.defer();
var req = $http({
url: 'http://localhost:3000/latest-live',
method: 'GET',
cache: false
});
req.success(function(object) {
var data = object.data;
deferred.resolve(data);
});
req.error(function(err) {
deferred.reject(err);
});
return deferred.promise;
}
}]);
Usually that error is thrown, if there is definitly no reponse from the server you are trying to reach in your URL.
Make sure that localhost is actually known to your system and something is running at port 3000 that can return something to your client.
Make sure that the route is known on your server /latest-live and that it didn't crash before returning any information.
First thing I would do is to check, if the URL is actually returning something, when you try to call it in your browser.
Update: Status Codes
Usually the status code is in the response, so you might want to check, if there is anything in err or response, depending on what function is called:
response.status – Number – HTTP status code
response.statusText – String – HTTP status text
Best regards
Related
Hello first of all thanks for your support,
I getting started with angular and I am trying to use conmsume data from an API for my app. I am having a few problems with this.
First of all CORS:
To run local http server I am using the one that comes with node.js (using http-server command).
I am using http://www.mocky.io/ to test the app. I've generated differents (with headers I've found around the net that are supposed to fix it) response there to try to fix CORS (always getting preflight error) but nothing seems to work.
I have added this to my save method (inside a factory):
save: {
method: 'POST',
headers: {
'Access-Control-Allow-Origin': '*'
}
}
If I use a Chrome extension called CORS I can bypass that and receive response but then I am not able to manage the promise and get the data inside the response. I would like to be able to show the response's json on the view.
$scope.submitForm = function() {
var promise = null;
promise = CheckFactory.save($scope.partner).$promise;
$scope.result = promise.data;
}
This functions sends the data from the form to the factory and perform the request but then I am lost and do not know how to manage the data I need from the response.
Thanks in advance :)
Basically you need to put .then function over your save method call promise. So that will call .then function's once data save request gets completed.
$scope.submitForm = function() {
CheckFactory.save($scope.partner).$promise
//it will called success callback when save promise resolved.
.then(function(data){ //success
$scope.result = data;
}, function(error){ //error
});
}
I started an AngularJs App and to retrieve some data from database I'm using NodeJS (totally new to me), on the console of NodeJS it works and also typing the URL directly in the browser but when I try to get the information needed using http.get() in AngularJS using the same URL in the browser I get 404 not found.
I figured it would be a cors problem so I added
require('cors') in the nodeJS app and still doesn't work
Can anyone help me with that ?
Am I right making separate apps for Angularjs in front-end and NodeJS in the Backend or should I assemble them in only one application ?
Thank you for your help
This is the AngularJS code:
$scope.keyLoad = function () {
$http.get("localhost:8080/product")
.success(function (response) {
$scope.keys = response;
console.log(response)
})
};
$scope.keyLoad();
I get 404 not found. I figured it would be a cors problem
If it says it is a 404 error then it is a 404 error and not a CORS problem.
Look at your code:
$http.get("localhost:8080/product")
That URL is missing the scheme. It is a relative URL.
You are going to be requesting something like http://example.com/myapp/localhost:8080/product.
Put http:// or https:// in front of it.
You should use $http service.
For example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Or
$http.get('/someUrl', config).then(successCallback, errorCallback);
I have within my code that makes an $http.post to a back end, and of course things can go wrong. If I use the below syntax within angular:
$http.post(url).success(function(data, status, headers, config))
.error(function(data, status, headers, config));
If there is an error, I can retrieve the error code using status and handle it within the function defined in error(). However, if instead I take this approach (which is the one I am in fact using):
var deferred = $q.defer();
$http.post(url).success(deferred.resolve).error(deferred.reject);
return deferred.promise;
With the second syntax, I have all of my ajax calls within a separate ServiceJS directory, and can handle the successes or errors on a case by case basis. For instance, if the second snippet was Service.MyFunction() then in the code where I need it I would:
Service.MyFunction().then(function() {},
function(data, status, headers, config) {});
However, if I use this code block, status, headers, config are all undefined. My question is how can I retain this syntax but still retrieve the error code?
As an added reference, the back end is a C# Web API project, which would return errors using return BadRequest(); or the like.
Try something like this:
myFunction(){
var deferred = $q.defer();
// you can use .then() instead of .success or .error
$http.post(url).then(function(successResponse){
var data = successResponse.data;
var status = successResponse.status;
...
deferred.resolve(successResponse);
}, function(failureResponse){
var status = failureResponse.status;
var config = failureResponse.config;
...
deferred.reject(failureResponse);
});
return deferred.promise;
}
well, I'd say it's a good practice and more standard to implement a http interceptor and handle the HTTP errors from there intead of handling the error one by one on each http or resource object, and your code will be located in a single location.
basically, you can segment the actions to take depending on the error status you get for example:
angular.module('app').factory('myInterceptor', ['$q',
function($q){
return {
'responseError': function(rejection){
switch(rejection.status){
case 0:
//'No connection, is the internet down?'
break;
case 422:
// error
break;
case 484:
// error
break;
default:
// message rejection.status, rejection.statusText
break;
}
return $q.reject(rejection);
}
};
}
]);
$http is already returning a promise, so why not use that one?
function myFunction() {
return $http.post(url);
}
// ...
myFunction().success(function(data, status, headers, config) {
// ...
});
... or ...
myFunction().then(...);
The promises returned from $http have the methods success and error in addition to the other promise methods. Read more at Angular docs for $http.
I'm building an AngularJS (1.2.16) web app with a RESTful API, and I'd like to send 401 Unauthorized responses for requests where authentication information is invalid or not present. When I do so, even with an HTTP interceptor present, I see the browser-presented basic "Authentication Required" dialog when an AJAX request is made via AngularJS. My interceptor runs after that dialog, which is too late to do something useful.
A concrete example:
My backend API returns 401 for /api/things unless an authorization token is present. Nice and simple.
On the AngularJS app side, I've looked at the docs and set up an interceptor like this in the config block:
$httpProvider.interceptors.push(['$q', function ($q) {
return {
'responseError': function (rejection) {
if (rejection.status === 401) {
console.log('Got a 401')
}
return $q.reject(rejection)
}
}
}])
When I load my app, remove the authentication token, and perform an AJAX call to /api/things (to hopefully trigger the above interceptor), I see this:
If I cancel that dialog, I see the console.log output of "Got a 401" that I was hoping to see instead of that dialog:
Clearly, the interceptor is working, but it's intercepting too late!
I see numerous posts on the web regarding authentication with AngularJS in situations just like this, and they all seem to use HTTP interceptors, but none of them mention the basic auth dialog popping up. Some erroneous thoughts I had for its appearance included:
Missing Content-Type: application/json header on the response? Nope, it's there.
Need to return something other than promise rejection? That code always runs after the dialog, no matter what gets returned.
Am I missing some setup step or using the interceptor incorrectly?
Figured it out!
The trick was to send a WWW-Authenticate response header of some value other than Basic. You can then capture the 401 with a basic $http interceptor, or something even more clever like angular-http-auth.
I had this issue together with Spring Boot Security (HTTP basic), and since Angular 1.3 you have to set $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; for the popup not to appear.
For future reference
I've come up with this solution when trying to handle 401 errors.
I didn't have the option to rewrite Basic to x-Basic or anything similar, so I've decided to handle it on client side with Angular.
When initiating a logout, first try making a bad request with a fake user to throw away the currently cached credentials.
I have this function doing the requests (it's using jquery's $.ajax with disabled asynch calls):
function authenticateUser(username, hash) {
var result = false;
var encoded = btoa(username + ':' + hash);
$.ajax({
type: "POST",
beforeSend: function (request) {
request.setRequestHeader("Authorization", 'Basic ' + encoded);
},
url: "user/current",
statusCode: {
401: function () {
result = false;
},
200: function (response) {
result = response;
}
},
async: false
});
return result;
}
So when I try to log a user out, this happens:
//This will send a request with a non-existant user.
//The purpose is to overwrite the cached data with something else
accountServices.authenticateUser('logout','logout');
//Since setting headers.common.Authorization = '' will still send some
//kind of auth data, I've redefined the headers.common object to get
//rid of the Authorization property
$http.defaults.headers.common = {Accept: "application/json, text/plain, */*"};
I am following the tutorial related to Angular.js that is located on pluralsight.com. So far I did not have serious issues. Tutorials are very good and easy to follow. However, there is something that I cant resolve on my own. I would like my deffereds to react differently either on success or on fail. In this case they are always firing like they succeeded.
Service:
var resource = $resource('/data/event/:id', {id: '#id'});
return {
getEvent: function (id) {
var deferred = $q.defer();
resource.get({id: id},
function (event) {
console.log("This is (EVENT): " + event);
deferred.resolve(event);
},
function (response) {
console.log("This is (RESPONSE): " + event);
deferred.reject(response);
});
return deferred.promise;
Controller:
$scope.event = eventData.getEvent(2)
.then (
function(event) {
$scope.event = event;
console.log(event);
},
function(response) {
console.log(response);
}
);
In other words, if I send the wrong id (to load JSON file that does not exists) I want it to let me know that.
The $resource service in angular wraps a call to the $http service applying some REST conventions to the HTTP request. These are all documented here in the $resource docs.
When handling the promise from $resource, if the HTTP status code is 200, then the success callback will be executed. Otherwise (if the HTTP status code is in the 400 or 500 range), the error callback will be executed. This is a typical REST convention.
So, since your service is always returning 200 Status codes, $resource assumes that this is a successful server call and executes the success callback.
In order to handle this, you would need to use $http directly or change your service so that it returns the correct HTTP status code.
Hope this helps.