vue.js - Safari doesn't load all resources of the webpage

Question

I have a very weird problem with Safari opening my web app.

The setup: I am running an Vuejs application stored in a S3 Bucket on AWS. The app is exposed by an API Gateway.

The Problem: When opening the app only index.html and the favicon are loaded but not the other assets. Sometimes they occur inside the Network tab in dev tools with the message "Failed to load resource" but sometimes not.

"Solution": When I open the app with http (which doesn't work) and then with https again, the resources can be loaded somehow and the app will work fine even when reloading with cache clearing.

Does anyone know how to overcome this problem? ???♂?

question from:https://stackoverflow.com/questions/66060276/safari-doesnt-load-all-resources-of-the-webpage

Answer 1

I have a similar problem (not related to vue.js and amazon, but just to Subject: Safari selectively loads resources): Mac OS Safari 14 (desktop version, I don't know for a mobile one) doesn't load all referred css, js, and image files.

Safari 13 performed well. Other browsers (Chrome, Firefox) perform well. All files are referred the same way, using relative URLs.

When using Safari 14, some of them are loaded, some are not. Caching is not an issue (I use "empty caches" before loading a page). It looks like successfully loaded files are randomly chosen (the same file is sometimes loaded, sometimes it isn't).

In the Network tab of Develop menu, for not loaded files Preview says: "An error occurred trying to load the resource", and in Headers, section "Request", there are only: Accept, Referer, and User-Agent lines, while: GET, Cookie, Accept-Encoding, Host, Accept-Language, and Connection lines are missing. Response says: "No response headers".

In the server's access log, there are no lines related to not loaded files.

EDIT:

The cause: TLS 1.0

The solution: TLS 1.2