setting up s3 bucket to handle cross origin resource policy

Solution for setting up s3 bucket to handle cross origin resource policy
is Given Below:

I am facing issues playing audio files from my s3 bucket. I was wondering if I set up the cross origin resource policy poorly.

Here is my server.js file:

app.use(cors());


app.use(function(req, res, next) {
  res.header("Cross-Origin-Resource-Policy", "cross-origin");
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
  
});

The error chrome throws me is:

GET https://monkeys.s3.amazonaws.com/sounds/1/6.wav?AWSAccessKeyId={test}&Expires=1627949062&Signature=HkT2CyazqovtjPVpDNKCu9Nsyk8%3D&response-content-disposition=attachment net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep
manage:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

My bucket is set up like this in the cors section:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://telecurve.herokuapp.com/manage"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://telecurve.herokuapp.com/"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Anything im missing? I’ve been at this for days and can’t seem to find out why. I have more posts detailing the code side if you need more context! Desperately need help.