AngularJS getting status code 0 for 413 (Request Entity Too Large) in Loopback API

Question

1. Some info

I have an AngularJS 1.3.15 client-side app making requests to my loopback api.

In the app, I intercept request results (with $httpProvider.interceptors) and interpret the status codes to display meaningful messages when the user does something - for example I intercept 401 responses telling the user he doesn't have authorization, 200 for when he saves something successfully and so on.

2. The problem

For example if the user tries to upload an image that's too big, the request payload will exceed my remoting limit and I am able to intercept a requestError but the status code always shows 0. Looking at the browser's console I see this:

PUT http://localhost:3000/api/Modules?id=9 413 (Request Entity Too Large)
XMLHttpRequest cannot load http://localhost:3000/api/Modules?id=9. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 413.

The problem is that if the server is offline, I also get status code 0 when intercepting requestError, so there's no way for me to distinguish an error connecting to the server between an error sending too much data.

Is there any chance there's an issue with the express router middleware? I can't seem to find anyone that's having the same problem...

Answer 1

I had the same issue, but the problem was not produced by AngularJS. The problem hint is:

 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Because CORS was not configured for the component that throw the 413 error, AngularJS could not get the correct status code. I had to enable cors in my case in my backend before nodejs -> express -> bodyparser was initiated and the problem was gone.