Intermittent CORS error in AWS Amplify-hosted Angular app when loading static assets

0

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:

  1. Setting customHttp.yml as described above and redeploying app
  2. 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.

ludovic
asked 8 months ago85 views
No Answers

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions