CORS Issue: Access-Control-Allow-Origin Header Missing
I am currently experiencing a CORS (Cross-Origin Resource Sharing) issue while attempting to access images stored in our cloud storage from a local application. The error is related to the absence of the Access-Control-Allow-Origin header in the server response, which is essential for allowing cross-origin requests from our local application.
As seen in the attached screenshot, the server response does not include the Access-Control-Allow-Origin header, leading to the following error: "CORS header ‘Access-Control-Allow-Origin’ missing."
To resolve this, we need to ensure that the cloud storage server is configured to include the Access-Control-Allow-Origin header, allowing requests from our local environment (http://localhost:3000 in this case).
Please advise on the next steps or if there's any configuration change needed on the server side to address this issue.
6 Replies
You can add a CORS policy to your bucket as shown here: https://developers.cloudflare.com/r2/buckets/cors/
Cloudflare Docs
Configure CORS | Cloudflare R2 docs
Cross-Origin Resource Sharing (CORS) is a standardized method that prevents domain X from accessing the resources of domain Y. It does so by using special headers in HTTP responses from domain Y, that allow your browser to verify that domain Y permits domain X to access these resources.
Hi @Purple Blob ,
Thanks for your reply.
I have already added the following CORS policy to my bucket as instructed:
[
{
"AllowedOrigins": [
"https://app-sg.scematics.xyz",
"http://localhost"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedHeaders": [
"Content-Type",
"Authorization"
],
"ExposeHeaders": [
"Content-Length",
"Access-Control-Allow-Origin",
"CF-RAY",
"Connection",
"ETag",
"Server",
"Vary"
],
"MaxAgeSeconds": 3600
}
]
Despite this, I’m still encountering CORS issues on my website. I've attached a reference image that provides more details on the error. Could you please help me resolve this?.
I believe it is because you need to specify the port if it is not the default (80/443), so your policy should include
http://localhost:3000Hi @Purple Blob ,
Thanks again for your continued support.
Thank you for the suggestion to include http://localhost:3000 in the policy. I have added it as recommended, but unfortunately, I'm still encountering issues. I've attached the relevant details and configurations for your reference.
Could you please take another look and let me know if there’s anything else I might be missing?
@scematics clear cache and see if that works. works for me