Ionic/Angular iOS端替换capacitor://localhost为http://解决S3上传失败

核心结论 #

可以让iOS端切换为http://localhost运行，这确实能解决协议差异带来的S3上传问题；同时也有更贴合Capacitor设计的适配方案，以下是具体实现：

方法1：修改iOS运行协议为http://localhost #

直接调整Capacitor配置，让iOS端使用HTTP协议运行：

1. 打开项目根目录的capacitor.config.ts（或.js）文件
2. 添加/修改server配置项：

   export default {
     server: {
       iosScheme: "http",
       hostname: "localhost"
     },
     // 其他原有配置...
   };
   

3. 同步iOS项目并重新构建：

   npx cap sync ios
   npx cap run ios
   

修改后iOS端将以http://localhost作为运行URL，和Android/Web端保持一致，从而绕过自定义协议的网络限制。

方法2：适配capacitor://协议（更推荐） #

如果不想修改运行协议，可以通过以下方式适配S3的CORS和AWS SDK配置：

调整S3 CORS规则 #

虽然你设置了AllowedOrigins: "*"，但AWS S3对自定义协议的兼容性可能需要更明确的声明，更新CORS规则为：

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

注意：CORS规则修改后需要等待5-10分钟才能生效

配置AWS SDK v2请求头部 #

在初始化S3实例时，手动指定请求的Origin头部，模拟Web/Android端的请求格式：

import S3 from 'aws-sdk/clients/s3';

const s3 = new S3({
  region: '你的S3区域',
  credentials: {
    accessKeyId: '你的AccessKey',
    secretAccessKey: '你的SecretKey'
  },
  // 添加请求拦截修改Origin
  request: (req) => {
    req.httpRequest.headers['Origin'] = 'http://localhost';
    return req;
  }
});

额外排查点 #

如果以上方法仍未解决问题，检查iOS的网络权限配置：
打开iOS项目的Info.plist，添加App Transport Security的宽松配置（仅用于测试，生产环境建议针对S3域名配置）：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

内容的提问来源于stack exchange，提问作者Iteration