How to fix failed XHR/Fetch requests in Safari
If you're seeing errors in the Network panel like "The resource was requested insecurely." or "An error occurred trying to load the resource." originating from XHR/Fetch requests that work most of the time, you may be suffering from a window.stop bug.
I was having an issue where my React component was failing to load network requests when pressing the back button on Safari. The problem didn’t exist on Chrome. I thought the issue had to do with the back/forward cache on Safari, but it turns out, Safari wasn't to blame, it was my own code. As part of the componentWillUnmount process, I call window.stop() to cancel any pending network requests, especially enqueued images. But I also cancel requests using an AbortController, and because I want the abort controller to finish aborting, before cancelling all requests with window.stop, I placed window.stop in a requestAnimationFrame callback. This worked fine in Chrome, but had the negative effect of canceling all new requests initiated from the freshly mounted component in Safari after pressing the back button. And calling window.stop lead me to the obscure error message "The resource was requested insecurely." If you see this message, check if you're calling window.stop() anywhere.