Skip to content

Getting CORS error when loading from font from s3  #454

@MohanRam1996

Description

@MohanRam1996

for dynamic fonts , i have stored my font in s3 bucket and when trying to access that via web font loader , iam getting CORS error

  //custom font
  await WebFont.load({
    custom: {
      families: [fontLibrary],
      urls: [customURL],
    },
    fontactive: (familyName, fvd) => {
      // console.log(`Font "${familyName}" has been loaded`);
      if (swalNeeded) {
        Swal.fire({
          icon: 'success',
          title: `Font "${familyName}" has been loaded`,
          showConfirmButton: false,
          timer: 1500,
        });
      }
      loaded = true;
    },
    fontinactive: (familyName, fvd) => {
      // console.log(`Font "${familyName}" failed to load`);
      if (swalNeeded) {
        Swal.fire({
          icon: 'error',
          title: `Font "${familyName}" failed to load`,
          showConfirmButton: false,
          timer: 1500,
        });
      }
    },
  });
  
  Note: this issue goes away when i disable cache from the chrome devtools -> network tab -> disable cache checkbox 
  
  when disable cache is enable , there is no issue 
  
  i also tried adding software based disable of cache in my react app but that did not work 
  
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />


moreover , all the access is public and there is no restriction on s3 side . 

how to fix this ? 

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions