I Always Got Cors Error When Send DELETE request to gcs Resumable Singed Url

Question

I've tried to use "resumable signed url" when uploading a file.

This is the CORS config on the bucket:

[{“maxAgeSeconds”: 3600, “method”: [“GET”, “PATCH”, “DELETE”, “OPTIONS”, “POST”, “PUT”], “origin”: [“*”], “responseHeader”: [“*”]}]

BE

    const options: GetSignedUrlConfig = {
      version: 'v4',
      action: 'resumable',
      expires: Date.now() + 60 * 60 * 1000, // 60 minutes
      contentType: 'text/plain',
    };

FE

const res1 = await axios.post(
    signedUrl.url,
    {},
    {
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'text/plain',
        'x-goog-resumable': 'start',
      },
    }
  );

  const res2 = await axios.put(res.headers.location, file);

Uploading the file works successfully. The problem is when I sent a 'DELETE' request via the url while uploading. The below code is what I used. Google Docs Link

await axios.delete(resumable_signed_url_session_uri, {
headers: {
'Content-Length': '0'
}
});

What I expected to happen is that the file is being stop uploaded. but I got a CORS error. To be more specific, in the Console panel of Chrome, I saw an error like this:

'xhr.js?78a4:193 Refused to set unsafe header "content-length"'.

After this error, I got a CORS error:

Access to XMLHttpRequest at 'https://storage.googleapis.com/%5Bbucket%5D/test/test.mp3? ... &upload_id=ADPycdvPhSounQyXYnfOeyiXu-reeZf2j2ghdrXzHcUkSNzoFmmTa3k8Mutis_hhXJjEiMbP6TtzSbjuXzXSClvHUrqdNUlvCJiy' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Where is it wrong? Any help would be appreciated.