Axios Catch being called even when response is 200 (Successful)

Question

I am using a Electron Vue App with Axios for my HTTP calls to my Laravel Server. Everything was perfect in Dev mode of Electron. But as soon as I build my Electron App into a install and put it on the clients computer all chaos broke out. I fix some issues but this one issue is gonna kill me.

Simply put, even though all Axios return successfully they throw an error that I put in .catch(). I'm honestly very confused how that is even possible. For instance when my program loads it makes some calls to get needed information. Throws error and displays alert. I figure it was just my Laravel Server. But the data was successfully grabbed and added to application.

axios.post(`${this.$store.state.URL}/get_server_ticket_from_table?api=${this.$store.state.API}`, {
    id: this.ServerTicketMove.Server1.id,
    table: this.ServerTicketMove.currentTable
})
.then((response) => {
    console.log(response)

    if (typeof response.data.id != 'undefined') {
        this.ServerTicketMove.ticket = response.data

    }

})
.catch(() => {
    alert('Did not get Servers Table Information. Cant Connect to Main Server.')
}) 

I did some googling and saw some posts about CORS. So I went through and enabled that on my Web Server and in Laravel. That made a bigger mess. Same error but this time no data was applied to anything. So the .then() is not even being called. On top of that with CORS enabled my Axios seems to be making an additional HTTP call with the Request Method of OPTIONS. Why? I don't think CORS is the answer to my problem.

Also inside of my Electron Vue background.js I turned web security back on. Which was off because of development. Which did not change anything.

win = new BrowserWindow({
    width: 275,
    height: 640,
    title: 'title',
    // webPreferences: { webSecurity: false }
})

Does Anyone know what is happening?

EDIT - 1-14-2019

After finding the error "regeneratorRuntime is not defined" I think this is a Babel Issue. I've followed everything https://babeljs.io/docs/en/babel-polyfill/ and I still get the "regeneratorRuntime is not defined". Is there anything about Babel + Axios + Electron + Await/Sync working all together with no errors? I personally would like to not just ignore the "regeneratorRuntime is not defined" and find a solid solution for this problem if possible. Any input or things for me to research would be appreciated!

Icehouse

if CORS is the issue, you can either add 'cross origin' header to your laravel apps, or disable webSecurity. OPTIONS request are preflight request. It'll be there when webSecurity is enabled – Underhanded

@JacobGoh Disabling WebSecurity again seems to have stopped the additional HTTP call. And getting rid of all the CORS settings I only got one 1 HTTP 403 error. Im running an Apache Server. Any clue on that 403 Error even though I still get the information from the server successfully? Mind you the server is hosted locally. – Icehouse

Ok so I have made some progress finding out more about my problem. When I make an Axios call and use the Axios Errors console logs I found this error: "regeneratorRuntime is not defined"... And some googling lead me to babel-polyfill. But Still getting the error above even though its a 200 status and successfully calls the .then(). Should I try await on or in my Axios function? Also with all that in mind, is this not a Axios issue but simply a Babel Issue? – Icehouse

Answer 1

After much Googling I figured out I was simply missing dependencies in my package.json. Even though they were required in node_modules folder they were not listed as a dependency in my program.

Working on my Production build of Electron + Vue + Axios + Sync/Await

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

And, in .babelrc, add:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

Got this code from this answer from here

Icehouse

Answer 2

this issue happen when your response have an error , for example when the response is correct but in the then response you do something that throw an error , axios then catch that error , even if the response from the server was success

Trotyl

Thanks. This helped me. – Dispensatory

It is said that I can not mark this as accepted answer. – Posner

Answer 3

Adding it here as I spend hours on this one without success and that https://github.com/axios/axios/issues/1178 is closed.

To debug this, use chrome devtools and check "Pause on caught exceptions" and "Pause on uncaught exceptions", it broke exactly where the issue was being thrown.

Varletry