Problem:
Sometimes, some users encounter a CORS error when loading static assets (like png or svg icons) in AWS Amplify-hosted web application. I've configured CORS headers using custom headers in Amplify, but some users are still reporting issues.
Details:
- The application is built using Angular.
- Amplify is used only for hosting/deploying.
- I wasn't able to reproduce the error. I'm based on feedback from users.
- Same users have been reporting errors but it doesn't happen every time they load the app, only sometimes (didn't find any pattern)
- Error seems to happen only for static assets, i.e. images (png, svg)
- In the monitoring panel in Amplify console, I can see the 4xx errors (and respective times) that match user reports of failed loadings.
- I'm using the custom HTTP header specification
customHttp.yml
below, written based on Amplify documentation. webapp
is the directory of the git repository where the Angular app is located (so I followed instructions for monorepo). Motivation for this custom header was the error message No 'Access-Control-Allow-Origin' header is present on the requested resource. I chose pattern '**'
to match all files.
applications:
- appRoot: webapp
customHeaders:
- pattern: '**'
headers:
- key: Access-Control-Allow-Origin
value: '*'
Error Message:
Example of error reported by user in their browser's console:
Access to fetch at 'https://www.myUrl.com/assets/icons/telephone.svg' (redirected from 'https://myUrl.com/assets/icons/telephone.svg') from origin 'https://myUrl.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
ngsw-worker.js:430 Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for https://myUrl.com/assets/icons/telephone.svg returned response 504 Gateway Timeout
at LazyAssetGroup.fetchAndCacheOnce (ngsw-worker.js:430:17)
at async LazyAssetGroup.handleFetch (ngsw-worker.js:357:21)
at async AppVersion.handleFetch (ngsw-worker.js:921:21)
at async Driver.handleFetch (ngsw-worker.js:1443:19)
fetchAndCacheOnce @ ngsw-worker.js:430
What I've Tried:
- Setting
customHttp.yml
as described above and redeploying app
- I've reviewed the AWS Amplify documentation and searched for similar issues. I've seen a few but couldn't fix it yet.
similar error in S3 and documentation about Cloudfront
Question:
What could be causing this CORS error even though I've set a wildcard '*'
for 'Access-Control-Allow-Origin'?
I don't understand why it happens only for some users and intermittently, and wonder if there is any related setting I'm missing or a way to refine troubleshooting.
Any insights or suggestions would be greatly appreciated.