Origin capacitor://localhost is not allowed by Access-Control-Allow-Origin

Capacitor
1

I want download file on my ionic mobile app from amazon S3 but I have this issue Origin capacitor://localhost is not allowed by Access-Control-Allow-Origin.

So I add "capacitor://localhost" on my CORS configuration on amazon S3 like this :

[
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "HEAD",
        "GET",
        "PUT",
        "POST",
        "DELETE"
    ],
    "AllowedOrigins": [
        "*",
        "capacitor://localhost"
    ],
    "ExposeHeaders": []
}

]

but I have always the same issue.

My download function :

async downloadResource(filename: string) {

  try {

    this.url = this.changeSpecialCharacter(this.urlFolder + filename);
    let extention = this.getFileExtension(filename);

    filename = this.getFileName(filename);

    if (!filename.includes(extention)) {
      filename = filename + '.' + extention;
    }

    if (!filename) filename = this.url.split('\\').pop().split('/').pop();
    
    const response = await fetch(this.url, {
      headers: new Headers({
        'Origin': 'capacitor://localhost'
      }),
      mode: 'cors'
    });
    console.log(' response '+JSON.stringify(response));
    const blob = await response.blob();
    const blobUrl = URL.createObjectURL(blob);
    console.log(' blobUrl '+JSON.stringify(response));
    const result = await Filesystem.writeFile({
      path: filename,
      data: blobUrl,
      directory: Directory.Documents,
      encoding: Encoding.UTF8
    });

    console.log('File written', result);
  } catch (e) {
    console.error('error fetch '+e);
  }
}

I test also with const response = await fetch("https://file-examples.com/storage/feeb72b10363daaeba4c0c9/2017/10/file_example_JPG_100kB.jpg", {mode: 'cors'}); I have the same issue. SO the problem is from the device

2

Hi @leyou,

for now, you should use @capacitor-community/http. It provides a downloadFile() method that uses native HTTP and won’t throw CORS Errors or cause performance issues like downloading files using js. Later this this year, this feature will be moved to the FileSystem Plugin. See here: Capacitor Http Plugin API | Capacitor Documentation

await Http.downloadFile({
  url: this.url,
  filePath: filename,
  fileDirectory: Directory.Documents,
});

Also check if your download url doesn’t point to a 404 page. This also can lead to cors errors.

Regards,
Marius

3

Hi @mariusbolik, thank you for your answer. Download url doesn’t point to a 404 page, it work well. I try @capacitor-community/http

    async downloadResource(filename: string) {

          this.url = this.changeSpecialCharacter(this.urlFolder + filename);
          filename = this.getFileName(filename);
          
          const downloadFile = ((async () => {
        
            const options = {
              url: this.url,
              filePath: filename,
              fileDirectory: Directory.Documents,
              // Optional
              method: 'GET',
            }; 

            // Writes to local filesystem
            const response: HttpDownloadFileResult = await Http.downloadFile(options);
            console.log('reponse download '+JSON.stringify(response));
            // Then read the file
            if (response.path) {
              const read = await Filesystem.readFile({
                path: filename,
                directory: Directory.Documents,
              });
            }
          })()).catch(
            err =>   console.log("error downloadFile "+err)
          );;    

        }

I have this issue

To Native ->  Http downloadFile 18642081
2023-02-08 18:50:24.879520+0100 App[5439:1387695] [connection] nw_endpoint_handler_set_adaptive_read_handler [C1.1 52.218.98.59:443 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, ipv6, dns)] unregister notification for read_timeout failed
2023-02-08 18:50:24.881897+0100 App[5439:1387695] [connection] nw_endpoint_handler_set_adaptive_write_handler [C1.1 52.218.98.59:443 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, ipv6, dns)] unregister notification for write_timeout failed
File Dest file:///var/mobile/Containers/Data/Application/9918C1C4-0D20-43B1-84F6-678084330FFD/Documents/image
ERROR MESSAGE:  {"errorMessage":"Unable to download file","message":"Unable to download file","code":"DOWNLOAD"}
⚡️  [error] - {"errorMessage":"Unable to download file","message":"Unable to download file","code":"DOWNLOAD"}

So I add this on my Info.plist like on tuto GitHub - capacitor-community/http: Community plugin for native HTTP

<key>WKAppBoundDomains</key>
<array>
    <string>www.mydomain.com</string>
    <string>api.mydomain.com</string>
    <string>www.myothercooldomain.com</string>
</array>

When I did that my app not open again so I remove it.

For your information I use this app only on IOS and I have IOS14

4

Hi @mariusbolik, please I need help thank you :slight_smile: