由于 CORS 问题，无法在蜂窝网络上从 iOS Safari 直接上传到 S3

Question

我在 iOS Safari 上遇到了这一问题，由于 CORS 问题，我无法将文件直接上传到 S3。同时在 iOS 上，它适用于 Chrome、Firefox 和 Edge。此外，当连接到 WiFi 时，它可以在 Safari 上运行，但在蜂窝网络上失败。

这是我的 AWS S3 存储桶 CORS 配置

[
    {
        "AllowedHeaders": [
            "Authorization",
            "Accept",
            "Cache-Control",
            "Content-Type",
            "Origin",
            "origin",
            "Pragma",
            "Referer",
            "Sec-Fetch-Dest",
            "Sec-Fetch-Mode",
            "Sec-Fetch-Site",
            "User-Agent",
            "X-Requested-With",
            "x-requested-with"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "GET"
        ],
        "AllowedOrigins": [
            "https://app.com",
            "https://app.com/",
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 300
    }
]

这是错误：

[Error] Origin https://app.com is not allowed by Access-Control-Allow-Origin. Status code: 400
[Error] XMLHttpRequest cannot load https://aws.s3.link due to access control checks.

文件上传代码使用axios

// Multi-part upload: Uploads file parts to S3 using presigned URLs
uploadFileParts = async (
    asset: File | Blob,
    presignedUrls: { url: string; partNumber: number }[],
) => {
    const parts = [];

    let curr = 0,
      partLength = 0;
    let remaining = asset.size;
    for (let i = 0; i < presignedUrls.length; i++) {
      const { url, partNumber } = presignedUrls[i];

      if (remaining < MAX_PART_SIZE) {
        partLength = remaining;
      } else {
        partLength = MAX_PART_SIZE;
      }

      const chunk = asset.slice(curr, curr + partLength);
      const response = await axios.put(url, chunk, {
        headers: {
          'Content-Type': 'application/octet-stream',
          'Cache-Control': 'no-cache',
          Pragma: 'no-cache',
        },
      });

      remaining -= partLength;
      curr += partLength;
      if (response.status === 200) {
        parts.push({
          ETag: response.headers.etag,
          PartNumber: partNumber,
        });
      } else {
        throw new Error('Failed to upload part');
      }
    }

    return parts;
};

任何帮助将不胜感激！

Answer 1

修复： 进入 Safari 功能标志并单击“全部重置为默认值”。

似乎是当前版本的 IOS 和 safari 的一个错误。

查看苹果开发者论坛上的这篇文章：https://forums.developer.apple.com/forums/thread/764420