使用Filepond编辑文件时出现CORS错误的问题排查及解决方法

我可以通过预签名URL使用Filepond将图片上传至私有S3存储桶（该存储桶部署在CloudFront之后），但尝试用Filepond编辑图片时，浏览器出现CORS错误。

在Codesandbox示例中，以下代码可正常运行：

export default function App() {
  const fileLinks = [
    "https://cdn.shopify.com/s/files/1/0466/8784/6560/products/HALFCHAINCHARMRING_1_160x.jpg"
  ];
  return (
    <div className="App">
      <FormikEditFilesField name="productImageUrls" fileLinks={fileLinks} />
    </div>
  );
}

但将其中的文件链接替换为我的图片链接https://alpha.assets.bimelody.com/images/movintnyc/VD33744WHITE_4_1000x.webp时，就会触发CORS错误——直接在浏览器中打开该链接无异常，本地运行React应用时图片显示也正常，只有通过Filepond加载图片时才会出错。

我对此感到困惑：如果是CORS问题，为什么本地显示图片正常，Filepond编辑时却不行？是不是我的API或存储桶缺少必要配置？

经查实，问题出在S3存储桶的CORS配置中遗漏了对HEAD请求方法的允许。更新配置后问题解决，最终的存储桶CORS配置如下：

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

若你遇到相同问题，可参考AWS官方文档及相关技术博客检查CloudFront和S3的CORS配置。

此外，Chrome的缓存问题可能导致仅在该浏览器中出现CORS错误，可通过以下代码解决：

fetch(myRequest, {
  method: 'GET',
  mode: 'cors',
  cache: 'no-store', 
})

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