Search code examples
vue.jselectronaxiosbabel-polyfill

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


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!


Solution

  • 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