Can't catch CORS ERROR

[ray0324]

Can't get access to axios.interceptors.response whith cors err No 'Access-Control-Allow-Origin' header is present。

[jcready]

Browsers make the entire response opaque when preflight responses fail, see /lib/xhr.js line 85.

[lrettig]

I'm running into this too. What's best practice around handling this sort of situation? Is there any way to get more info on what went wrong so we can interpret the error and report it to the user or attempt to intercept the error?

[jcready]

The best you're going to do is something like this:

axios.interceptors.response.use((response) => response, (error) => {
  if (typeof error.response === 'undefined') {
    alert('A network error occurred. '
        + 'This could be a CORS issue or a dropped internet connection. '
        + 'It is not possible for us to know.')
  }
  return Promise.reject(error)
})

[lrettig]

Thanks. This is incredibly frustrating because when a CORS request fails and returns a 400 error, we cannot see the error because of this issue. We can't even see the error code! This makes it very difficult to handle these errors.

…

On Thu, May 25, 2017 at 18:04 Wyatt Cready ***@***.***> wrote: The best you're going to do is something like this: axios.interceptors.response.use((response) => response, (error) => { if (typeof error.response === 'undefined') { alert('A network error occurred. ' + 'This could be a CORS issue or a dropped internet connection. ' + 'It is not possible for us to know.') } return Promise.reject(error) }) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#838 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADKbNA4gugW2-rXVkjiAe2X1i_G951cGks5r9ZhmgaJpZM4M633f> .

[jcready]

Again, this isn't an issue with axios. Browsers will not allow JS to see any response information when there is a CORS issue for security reasons. You can test this yourself with the following:

x = new XMLHttpRequest()
x.onerror = (e) => console.log('THIS IS ALL THE INFO WE HAVE', e, x)
x.open('GET', 'https://www.google.com')
x.send()

You'll see that there is no helpful information. There is no way to distinguish between no internet connection, bad DNS, or CORS issues, etc. All you know is that there was a Network Error.

[lrettig]

I understand. It has nothing to do with axios and you should probably close this issue. I'm just lamenting that the situation is pretty dire and frustrating.

…

On Thu, May 25, 2017, 18:34 Wyatt Cready ***@***.***> wrote: Again, this isn't an issue with axios. Browsers will not allow JS to see any response information when there is a CORS issue for security reasons. You can test this yourself with the following: x = new XMLHttpRequest()x.onerror = (e) => console.log('THIS IS ALL THE INFO WE HAVE', e, x)x.open('GET', 'https://www.google.com')x.send() You'll see that there is no helpful information. There is no way to distinguish between no internet connection, bad DNS, or CORS issues, etc. All you know is that there was a Network Error. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#838 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADKbNMMI_dGW_K9-wAdOaMPcXaDb5Orcks5r9Z-DgaJpZM4M633f> .

[gcollombet]

The issue is also happening when their is a preflight request OPTIONS that is validated by the server (so no CORS error happen, the request is valid, and then a regular request return a 400 error).
OPTIONS 200 OK
POST 400 Bad Resquest

[IAMtheIAM]

I spent hours trying to figure out why I was getting a 400 response. I tried angular's HttpClient, Axios, and jQuery ajax. Finally I realized it was a CORS issue. Lol there goes a few hours.

It wasn't saying anything at first. just 400 Bad Request. Then I checked the console and saw the browser error message Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. I was over in the network tab and it really doesn't give any useful information at all from there, where you would expect it to be.

[pxwee5]

#838 (comment)

@jcready Can this not be implemented into Axios core as default?

[inspire22]

This old, but IMO rendering a console message is the way to handle this, it should create an error with e.message set to the cors error, rather than the generic "Error: Network Error" that is the default.

[jcready]

@inspire22 if you read through the old comments on this thread you'll see that axios has no way to know it is anything more specific than a network error.

[inspire22]

Oops, my bad. Definitely not a good design choice / bug by chrome, so we get confused people like me here :) Thanks for being a part of this nice project!