API calls with axios inside a React app bundled in

Question

Just a quick question:

I'm building a React/Electron app and inside the React app I've got a few async/await calls to an API. These calls are made with axios and work fine when in development.

When the app is wrapped in Electron, the requests return with a "400 Headers required" error. When running a dev version of React it call the api correctly.

Any idea why this is happening?

I came across the WebRequest Electron method https://electronjs.org/docs/api/web-request. It looks like I could intercept the requests and change the headers, but it seems strange to have to do that.

Thank you for the help!

标签： reactjs electron axios

举报

Answer 1

It looks like the issue was my CORS proxy https://cors-anywhere.herokuapp.com/.

The 3rd party API I'm calling hasn't got CORS enabled and when I'm developing locally in React, I had to use the CORS proxy.

That being said when I bundle the app inside Electron, the call to https://cors-anywhere.herokuapp.com/ return '400 Header required' since that's how that proxy handles non-CORS related call. If it didn't respond like this you could use it as a general proxy.

So removing the CORS proxy url from my links made the app work inside Electron. By that logic I guess it means that by default the render API calls (coming from React) from inside Electron are not affected by CORS.