I have a page where there is an anchor tag with download attribute to download the file, now the href contains a backend request which redirects to a link of S3 where the file stored and opens the file on a new tab. Now on all browsers on desktop(chrome, firefox, safari) on mobile firefox, safari(IOS , Andriod) it works just fine,I only run into issue with chrome on android where the new tab does open up and closes right away, let me show you my code

      <a
        download={`statement-${statement.month_name}.pdf`}
        href={`${statement.url}`}
        target={"_blank"}
      >
        {statement.year} {"・"} {statement.month_name}
      </a>

the statement.url returns a backend url like

http://somedomainname.com/api/accounts/3346062314455116393/statements/2021/9/?sig=eyJ1c2VyX2lkIjozMzQ2MDYyMzE0Mjk5ODgwODI5fQ%3A1mhzTu%3AD6p8vy-zXuROLF7kL3C0PCa8lbxeupNQKDUrfNvJ8uY%3A1mhzTu%3A6sty7KxllEwDqOj1uevrGkh7vmztyCnSD4pyqFP9KrU

which redirects to

https://bucketname.s3.amazonaws.com/sandbox/account_statement_sample.pdf?token=sometoken&config=qubest&date=0921&statementType=G

now as you can see from the a tag there is a download attribute which in theory should force download the file , but it opens the PDF in a new tab, i thought to implement a custom script where i would force download the file through javascript

fetch(url).then(function(t) {
    return t.blob().then((b)=>{
        var a = document.createElement("a");
        a.href = URL.createObjectURL(b);
        a.setAttribute("download", filename);
        a.click();
    }

this works for most files but not for S3 bucket path as amazon has disabled CORS for security reasons so i cannot use it.

If anyone knows anything about this i would appreciate any sort of help, i've been stuck on it for days.