I am engaged on a React software with Vite and Capacitor, which must load media content material (pictures and movies) from URLs hosted on CloudFront. For safety causes, accessing the media requires attaching a Referer header. Whereas this works seamlessly on internet and Android platforms, the place the header is routinely connected, I am going through a difficulty on iOS the place the Referer header is lacking and I can not manually add it.
In my software, media components (img and video tags) are speculated to load content material from CloudFront URLs. On Android and internet, the mandatory Referer header is current within the requests, however on iOS, it is absent. This absence prevents the media from loading because the CloudFront URLs require the header for entry. I tried to load the media by way of JavaScript and manually add the wanted header to the request. Nonetheless, inspecting the community site visitors revealed that the header was nonetheless not connected.
How can I make sure that the Referer header is included in media requests on iOS in a React/Vite/Capacitor software? Any strategies or workarounds to resolve this drawback, together with various approaches to manually including headers in JavaScript, could be significantly appreciated.
