Mapbox CORS Error When Loading Vector Source from S3

I have been using S3 to serve raster tiles to Mapbox. This has been fine and great, but now I want to add a vector tile source in the same S3 bucket and through the same Cloudfront distribution and am getting a bunch of CORS errors. What makes this confusing is that the only thing that is different is that I am pulling in some .pngs from a vector source rather than raster, so I don't see how this can be anything to do with S3 or Cloudfront.

These are errors in console:

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.

This the working code to pull in the raster tiles:

this.map.addSource(l, {
    "type": "raster",
    "tiles": [`https://<my-cf-url>.net/demo/${ft}/${rp}/{z}/{x}/{y}.png`],
});
this.map.addLayer({
    "id": l,
    "type": "raster",
    "source": l,
    "paint": {
        "raster-opacity": 0.6,
    }
});

This is the code to pull in vector tiles:

this.map.addSource("layer", {
    "type": "vector",
    "tiles": ["https://<my-cf-url>.net/demo/{z}/{x}/{y}.png"],
});
this.map.addLayer({
    "id": "layer",
    "type": "fill",
    "source": "layer",
    "source-layer": "pngs",
});

If I specify raster rather than vector then mapbox logs decoding errors, which makes sense as the vector tiles were generated from a vector file.

Am I doing something wrong, or is the CORS error known to be a red-herring hiding a problem with the data itself?

Moreover, I can make CURL requests to the urls from my terminal and have no problem accessing them, it is only via Mapbox in the browser.