英文:
CORS issue when try to edit files with Filepond
问题
以下是代码部分的翻译：
codesandbox链接: https://codesandbox.io/s/muddy-firefly-vfxmib?file=/src/App.tsx
我能够通过https://github.com/pqina/filepond使用预签名URL将图像上传到S3。然而，当我尝试使用Filepond编辑图像时，浏览器会给我CORS错误。S3存储桶是私有的，并位于Amazon CloudFront之后。
在上面的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或存储桶中漏掉了一些配置？
更新
看起来我漏掉了在CORS配置中允许HEAD头。
更新后，它可以正常工作。我的最终存储桶CORS配置如下：
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"POST",
"PUT",
"HEAD",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
如果您遇到相同的问题，请根据以下链接检查您的CloudFront和S3配置：
- https://www.mslinn.com/blog/2021/03/21/cors-aws.html
- https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/
此外，Chrome存在可能会导致仅在Chrome上出现CORS问题的缓存问题，可以使用以下方式解决：
fetch(myRequest, {
method: 'GET',
mode: 'cors',
cache: 'no-store',
})
英文:
codesandbox link: https://codesandbox.io/s/muddy-firefly-vfxmib?file=/src/App.tsx
I'm able to upload images to S3 through presighed URL with https://github.com/pqina/filepond. However, when I try to edit images with Filepond, the browser gave me CORS error. The S3 bucket is private and behind Amazon CloudFront.
In above codesandbox, you can see that it works fine with:
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>
);
}
However, if you replace above file link with my image link "https://alpha.assets.bimelody.com/images/movintnyc/VD33744WHITE_4_1000x.webp", an CORS error will get thrown. You can open this link in browser with no problem.
Also want to mention that when I run the React app locally, displaying the images work fine. It is just try to load the images with Filepond doesn't work. This part confuses me as if it is a CORS problem, then why it works in localhost for displaying the images, but not for Filepond edit ?
Do I miss some configuration in my API or bucket?
Update
Looks like I missed allowing HEAD header in the CORS configuration.
After update, it works. And my final bucket cors is:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"POST",
"PUT",
"HEAD",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
If you encountered same problem, check your cloudfront and S3 configuration based on these links:
- https://www.mslinn.com/blog/2021/03/21/cors-aws.html
- https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/
Also, Chrome has caching issue that may cause Chrome-only CORS issue, which can be addressed with:
fetch(myRequest, {
method: 'GET',
mode: 'cors',
cache: 'no-store',
})
答案1
得分: 1
S3配置错误。此问题已经解决。
请查看 https://stackoverflow.com/a/70780987/6323902
英文:
Wrong S3 configuration. This problem is already resolved.
Please check https://stackoverflow.com/a/70780987/6323902
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论