OpenLayers: the rendering of a COG geotiff works in Chrome and not in Firefox

Question

I have built this sample page in which I render a COG Geotiff. It works properly in Chrome and not in Firefox.

I read the errors in console, but I don't understand what the problem is.

I have also built it using npm run build, and published it here: https://andybandy.it/progetti/tmp/cog-nogeo/

And it's the same: I view it in Chrome and not in Firefox

import GeoTIFF from "ol/source/GeoTIFF.js";
import Map from "ol/Map.js";
import TileLayer from "ol/layer/WebGLTile.js";
import Projection from "ol/proj/Projection.js";
import View from "ol/View.js";
import { getCenter } from "ol/extent.js";

const extent = [23093, -19213, 45245, 2973];

const projection = new Projection({
  code: "custom",
  units: "pixels",
  extent: extent
});

const map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new GeoTIFF({
        convertToRGB: true,
        sources: [
          {
            url: "https://andy-aws.s3.eu-north-1.amazonaws.com/10_1155.tif"
          }
        ]
      })
    })
  ],
  view: new View({
    projection: projection,
    center: getCenter(extent),
    extent: extent,
    zoom: 1
  })
});

Answer 1

I have set wrong CORS parameter in S3.

I have set in this way and it works

[
    {
        "AllowedHeaders": [
            "Authorization",
            "Content-Range",
            "Accept",
            "Content-Type",
            "Origin",
            "Range"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Content-Range",
            "Content-Length",
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]