Catching an Access-Control-Allow-Origin error in JavaScript

by

While browsers will log a more-detailed error message to the console, you can’t access that from your code. See https://bugs.chromium.org/p/chromium/issues/detail?id=118096#c5:

The details of errors of XHRs and Fetch API are not exposed to JavaScript for security reasons.

As far as the what specs actually require here, the Fetch spec is what defines the details of the “status message” to provide in case of an error — even if XHR is used instead of the Fetch API (the XHR spec references the Fetch spec). And for any network error or response blocked by the browser, the Fetch spec requires that the status message be “the empty byte sequence”:

A network error is a response whose status is always 0, status message is always the empty byte sequence, header list is always empty, body is always null, and trailer is always empty.

So all you can get back from any error you can catch is “TypeError: Failed to fetch” or such.

If you’re using XHR, all you have for handling an error is the onerror event handler:

xhr.onerror = function() { console.log("Error occurred but I dunno what exactly.")}

More Related Contents:

  1. “Origin null is not allowed by Access-Control-Allow-Origin” error for request made by application running from a file:// URL
  2. Origin is not allowed by Access-Control-Allow-Origin
  3. How to enable CORS in AngularJs
  4. Why does my http://localhost CORS origin not work?
  5. Origin null is not allowed by Access-Control-Allow-Origin
  6. enabling cross-origin resource sharing on IIS7
  7. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘…’ is therefore not allowed access
  8. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  9. A CORS POST request works from plain JavaScript, but why not with jQuery?
  10. AngularJS: No “Access-Control-Allow-Origin” header is present on the requested resource [duplicate]
  11. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  12. Understanding XMLHttpRequest over CORS (responseText)
  13. CORS request not working in Safari
  14. How to Detect Cross Origin (CORS) Error vs. Other Types of Errors for XMLHttpRequest() in Javascript
  15. Microsoft Edge blocked cross-domain requests sent to IPs in same private network CIDR
  16. How can I upload files asynchronously with jQuery?
  17. How to get the response of XMLHttpRequest?
  18. Enabling CORS in Cloud Functions for Firebase
  19. How to configure CORS in a Spring Boot + Spring Security application?
  20. HTTP HEAD Request in Javascript/Ajax?
  21. How do I load binary image data using Javascript and XMLHttpRequest?
  22. canvas.toDataURL() SecurityError
  23. jQuery.getJSON – Access-Control-Allow-Origin Issue
  24. d3.json method doesn’t return my data array
  25. Cross Domain Resource Sharing GET: ‘refused to get unsafe header “etag”‘ from Response
  26. FormData in IE8/9
  27. Access to Image from origin ‘null’ has been blocked by CORS policy
  28. How to allow CORS in react.js?
  29. Cross-domain connection in Socket.IO
  30. Intercept XMLHttpRequest and modify responseText

Leave a Comment