Ionic移动端从Amazon S3下载文件遇CORS错误，添加配置仍未解决

问题详情 #

报错信息：

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

已配置的S3 CORS规则：

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

当前下载函数代码：

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);
  }
}

测试公共图片URL（https://file-examples.com/storage/feeb72b10363daaeba4c0c9/2017/10/file_example_JPG_100kB.jpg）同样触发CORS错误，怀疑问题出在设备端。

排查与修复步骤 #

1. 移除手动设置的Origin请求头 #

Capacitor在原生设备上发起请求时，自带的Origin并非固定为capacitor://localhost：iOS默认是app://localhost，Android可能是http://localhost。手动指定Origin会导致和实际请求的Origin不匹配，直接删除这个自定义头：

// 修改后的fetch调用
const response = await fetch(this.url, {
  mode: 'cors'
});

2. 更新S3 CORS配置，覆盖多端Origin #

把Capacitor各平台的默认Origin都加入允许列表：

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

修改后等待1-2分钟让配置生效，再测试。

3. 原生环境下改用no-cors模式 #

CORS是浏览器端的安全机制，Capacitor原生环境（iOS/Android WebView）不需要严格遵循。把fetch的mode改成no-cors即可绕过校验：

const response = await fetch(this.url, {
  mode: 'no-cors'
});

注：no-cors会让响应类型变为opaque，但不影响你将响应转成Blob的操作。

4. 修复Filesystem.writeFile的参数错误 #

你当前代码把blobUrl（本地临时URL）写入文件，实际只会存储一段字符串，根本不是文件内容。正确做法是将Blob转成Base64，再写入：

// 修改后的Blob处理与写入逻辑
const blob = await response.blob();
// 将Blob转为Base64字符串
const base64Data = await new Promise((resolve) => {
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = () => resolve(reader.result?.toString().split(',')[1]);
});
// 写入文件，编码指定为Base64
const result = await Filesystem.writeFile({
  path: filename,
  data: base64Data,
  directory: Directory.Documents,
  encoding: Encoding.Base64
});

5. 验证S3 CORS配置是否生效 #

用curl命令测试请求头：

curl -H "Origin: capacitor://localhost" -I "你的S3文件完整URL"

查看响应头中的Access-Control-Allow-Origin是否包含你指定的Origin或者*，确认配置已生效。

内容的提问来源于stack exchange，提问作者Réda Youssoufi