Using SharedArrayBuffer on various browsers like Chrome, Firefox requires following the guidelines provided in this informative Mozilla document. It is emphasized that setting require-corp on the Cross-Origin-Embedder-Policy header is crucial due to compatibility issues with Firefox when using credentialless.
Despite implementing require-corp, encountering errors while attempting to load images from Firebase Storage such as:
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200
To address this, I have been working with Vue.js and have made CORS configurations with the following parameters:
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
The goal is to find a solution that enables the functionality of SharedArrayBuffer while also allowing seamless loading of images from Firebase Storage without necessitating the addition of
crossorigin="anonymous"<img> tag.
For reference, here is an example image
Provided below are my current headers:
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Resource-Policy': 'cross-origin'