I'm working on a React application with Vite and Capacitor, which needs to load media content (images and videos) from URLs hosted on CloudFront. For security reasons, accessing the media requires attaching a Referer header. While this works seamlessly on web and Android platforms, where the header is automatically attached, I'm facing an issue on iOS where the Referer header is missing and I can't manually add it.
In my application, media elements (img and video tags) are supposed to load content from CloudFront URLs. On Android and web, the necessary Referer header is present in the requests, but on iOS, it's absent. This absence prevents the media from loading as the CloudFront URLs require the header for access. I attempted to load the media via JavaScript and manually add the needed header to the request. However, inspecting the network traffic revealed that the header was still not attached.
How can I ensure that the Referer header is included in media requests on iOS in a React/Vite/Capacitor application? Any suggestions or workarounds to solve this problem, including alternative approaches to manually adding headers in JavaScript, would be greatly appreciated.