[SOLVED] CORS issue when try to edit files with Filepond

CORS issue when try to edit files with Filepond

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:

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', 
})

Solution

Wrong S3 configuration. This problem is already resolved.

Please check https://stackoverflow.com/a/70780987/6323902