The restangular docs states that the API with CORS error fails with a status code of 0, but mine is failing with -1.
From the docs:
This is typically caused by Cross Origin Request policy. In order to enable cross domain communication and get correct response with appropriate status codes, you must have the CORS headers attached, even in error responses. If the server does not attach the CORS headers to the response then the XHR object won't parse it, thus the XHR object won't have any response body, status or any other response data inside which typically will cause your request to fail with status code 0.
I have looked into similar questions on SO, but couldn't find anything related to this.
Related
I'm having trouble getting the HTTP status code from a empty response that is empty. status code is required to show the corresponding message that happened.
I Tried everything but couldn't get the http status code from the response. Does anyone have an idea ?
I believe this server is broken. I don't think there's a circumstance where POST can result in a 304 Not Modified response.
Usually 304 Not Modified is in response to a GET or HEAD request, when If-Match or If-Modified-Since is used.
However, if those headers are used for other HTTP requests (such as POST), the correct response is 412 Precondition Failed.
You usually never see a 304, because when it's used correctly (with GET), the browser will still not expose the 304, but instead it will give you a 200 and a response that's served directly from cache.
So in short, my best guess is that you can't, because your server doesn't conform with HTTP all assumptions are kind of out of the window.
A Promise that will be resolved (request success) or rejected (request failure) with a response object.
The response object has these properties:
data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.
xhrStatus – {string} – Status of the XMLHttpRequest (complete, error, timeout or abort).
So in your case you can add second parameter as status to get status code
Before, I had been making successful fetches from directly in my
ImageList component. Since incorporating Redux, I want to have the request done by a Saga, and have the resulting data sent to the store. However, when I attempt to make requests via a Saga, I get the CORS browser error:
Access to fetch at
'https://api.hopohop.com/API/TourService.asmx/GetToursByCity' from
origin 'http://localhost:3000' has been blocked by CORS policy:
Request header field access-control-allow-origin is not allowed by
Access-Control-Allow-headers in preflight response.
The entirety of the request is the same as when I was successful in the Component.
Are there any obvious reasons this may be happening? The error implies to me that it's the server's issue
To anyone seeing this in the future, make good use of the network tab in devtools when you get CORS error. The body of the request has to match it's signature (format) exactly. That's where my mistake was.
I'm using $http.get() to commit an API request which works just fine as long as I enable CORS in my browser while testing. Of course, that's just a bandaid.
I found this article:
Angular $http.get: How to catch all the errors?
And have my code set up with a then().catch() and while the catch code is executed as expected, the error is still thrown:
XMLHttpRequest cannot load 'url here' due to access control checks.
Even when I manually disable CORS for development's sake, I still get 401 errors, despite my catch().
The goal is prevent the old "red text" errors in the console and just handle them with an alert to the user.
When you send an http request in a browser, it first sends OPTIONS request which is called preflight. The browser blocks the request if the response for the preflight request doesn't contain Access-Control-Allow-Origin headers.
This preflight request is transparent to Javascript. So, for every ajax call, the browser sends two requests if the destination is cross-domain.
Even though you catch the error, browser is going to report the network error in the console if the preflight request fails.
I am getting this error.
XMLHttpRequest cannot load https://www.google.com/recaptcha/api/siteverify. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9001' is therefore not allowed access. The response had HTTP status code 405.
This is an extra security step for the server to ensure requests coming from clients are legitimate. Otherwise a client could fake a response and the server would be blindly trusting that the client is a verified human.
Use following google chrome extension:
Google chrome extension
this is a similar question to this post in SO.But the answer provided here cannot be applied in my case as i cannot change the response headers from server.
Suppose an http POST to a different origin. This implies CORS, including a CORS preflight exchange. Now suppose the OPTIONS request returns a 503 service unavailable error due to a server problem. In this case the error handler gives ""for data and 0 for status instead of giving me the status code 503 and the text:service not available. An example of this scenario is illustrated in the below image.
I am using angularjs $http and i know in the response there are no CORS header if such errors happen.and i cannot change it.
Is there any way i can receive the proper error code and the text in my rejection object.
This is not an issue of AngularJS / $http but it is the behavior of the browsers and their XMLHttpRequest object: If the CORS request fails, the browser does not give any information back to the caller.
Before I got this understanding, I also though it to be an AngularJS issue and I raised an open issue on github of Angular -> with the corresponding comment.
https://github.com/angular/angular.js/issues/13085#issuecomment-148047721
So I think there seems no other way to solve this as to add the Access-Control-Allow-Origin response header also on the proxy / load balancer in case of 503.
Edit:
If your load balancer is a HAproxy, the following may help you too:
HAproxy: different 503 errorfile for OPTIONS and POST methods
It shows how to let HAproxy anwer the CORS requests autonomous.