CORS Issue with localhost
I have my R2 bucket configured as follows:
[
{
"AllowedOrigins": [
"http://localhost:3000",
"http://localhost:3010",
"{MY_EXTERNAL_SITE}"
],
"AllowedMethods": [
"GET",
"POST",
"PUT"
],
"AllowedHeaders": [
"*"
]
}
]
But I still get this error when trying to access R2 images from my dev environment. I get no errors with {MY_EXTERNAL_SITE}
Access to image at '{IMG_URL} from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What's going on? The fact that {MY_EXTERNAL_SITE} works means the configuration is successfully in place
4 Replies
Troubleshooting 403 / CORS issues with R2
So, your assets aren't loading because you are getting a CORS error despite having setup everything correctly?
Let's try troubleshooting.
In your browser console, do you see a 401/403 error right above the CORS error? If yes, then you aren't actually dealing with a CORS issue! If you do have a CORS issue, head to the last section.
If you are using a Custom domain
Go to the Network tab and find the failing request (you may need to reload the page, since only requests after opening the developer tools are logged).
You need to check the response headers for the following two headers:
-
cf-cache-status
- cf-mitigated
If you have a cf-mitigated header
Your request was blocked by one of your WAF rules. Go to Security Events and look for what service blocked your request.
If you don't have a cf-cache-status header
Your request was blocked by Hotlink Protection.
Go to your dashboard and disable it or write a configuration rule to only disable on your Custom domain
If you are using the S3 API
Your request is very likely incorrectly signed.
Try executing the request via curl to inspect the real response returned by the S3 api and then tackle that issue.
Once your request is correctly signed, you'll receive the proper CORS headers.
If it's actually CORS
Here are some common issues with CORS configurations:
- ExposeHeaders is missing headers like ETag
- AllowedHeaders is missing headers like Authorization or Content-Type
- AllowedMethods is missing methods like POST/PUT (you do not need to include OPTIONS)It is a CORS error in the status of the network logs
It's localhost, not custom domains - I do have a cf-cache-status header.
I get the same error in Incognito where I don't get any response headers
I don't think this is using an S3 API, I just set the src of an image element in Javascript and add it to a Canvas
AllowedHeaders is set to '*", and AllowedMethods includes GET and POST/PUT
I don't have ExposeHeaders, do I need it? Why does it only fail on localhost?
Not a 401 or 403
@Sosmosis did you ever fixthis?