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
gefragt vor 9 Monaten88 Aufrufe
Keine Antworten

Du bist nicht angemeldet. Anmelden um eine Antwort zu veröffentlichen.

Eine gute Antwort beantwortet die Frage klar, gibt konstruktives Feedback und fördert die berufliche Weiterentwicklung des Fragenstellers.

Richtlinien für die Beantwortung von Fragen