We have a couple React applications that are suddenly failing requests to our REST API; this has only been happening for about a week and has happened with no changes to our code. Our infrastructure is as follows:
- Netlify-hosted React applications with a proxy set up via the netlify.toml file (detailed below).
- Heroku-hosted Node/Express REST API
- React applications were built with Create React App and uses Axios for requests and Mobx State Tree for managing state and initiating requests.
The requests only fail randomly, about half the time for some endpoints, and only fail in Safari and Firefox. Chrome and Opera do not have this issue. I’m testing on macOS, but Safari on iOS has the same issue. The way the requests fail is not due to CORS (as it shouldn’t be since we’re proxying requests), authorization, or any other standard HTTP error; what we get from Axios is a “Network Error” which is their method for setting the callback for the XMLHTTPRequest onerror function.
Here are the details of the relevant configuration in netlify.toml for proxying the requests to our API:
[build] command = "sed -i \"s@API_URL_PLACEHOLDER@$API_URL@g\" netlify.toml && yarn build" # API proxying [[redirects]] from = "/api/*" to = "API_URL_PLACEHOLDER/:splat" status = 200 force = true # React Router support [[redirects]] from = "/*" to = "/index.html" status = 200
API_URL is set per-environment to allow for environment-specific APIs and we replace API_URL_PLACEHOLDER with its value in the build command. The redirects are set up based on the recommendations in the documentation.
We are unable to reproduce this issue locally in any way. We run a production build of the React code and even proxy to our production Heroku instance and it works fine locally. The only difference between our local tests and our live Netlify server is how requests are proxied (we use http-proxy-middleware from npm locally for proxying). I tried to set up Netlify Dev for more one-to-one testing, but ran into a lot of errors.
Based on all of our research, it seems like something is suddenly happening on Netlify with how it handles redirects like ours. Has anyone else had this issue or does anyone have any additional thoughts on how to resolve this? We’ve exhausted everything we can think of over a few days and don’t know where to go next.
Thanks so much in advance.