Proxied requests to REST API suddenly failing in some browsers

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.

Hi @sporkbytesalex, thanks for writing in! really appreciate you being a part of our community. Do you have an x-nf-request-id from one of these failed requests? What was the status that was sent back to your client? Also what is the URL that is erroring out for you?

Hi @futuregerald, thanks for the response! And sorry for my delayed response; I’ve been out for the holidays.

I was just able to reproduce the issue and do have a request ID and URL I can share with you. The URL is a private URL that requires an authenticated user to make the request. Will that be an issue? Here’s the request ID:

72f6cb3b-03ba-406f-947e-e0f477dd9c9a-4056079

The response back from the server is a 200.

If it’s alright with you, I’d prefer to share the URL via private message or another private means. If we’re able to resolve the issue, I’m happy to post any helpful information here to aid other developers in the future.

Thanks again!

@sporkbytesalex, I’ve enabled private messages (PMs) on the community forum for you. Would you please send the URL to @futuregerald (or me)?

I show that Netlify also returned a 200 response for that. Was the issue with the data returned (not the status code)? What was the nature of the error (and please feel free to PM that if you prefer)?