Cloudflare Developers•5w ago

R2 throws 403 when loading an image on dev site

im getting a 403 when my react vite site is loading images locally on the dev server. However on the clouldflare pages hosted site it works fine.

10 Replies

averwhyOP•4w ago

:catAsk: :catAsk:

harshil1712•4w ago

Hey, we need more information to understand the issue. How are you fetching the images? What CORS policy have you setup?

Idle•4w ago

no error information no header information no WAF information no nothing

how exactly is anyone supposed to help you?

Flare•4w ago

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)

averwhyOP•3w ago

Hey there thanks for the response. I have a React app made with Vite and am just displaying images using the regular <img/> tag. I'm not familiar with CORS policy but I used this site and it returned these headers for my site:

access-control-allow-origin: *
cache-control: public, max-age=0, must-revalidate
cf-cache-status: DYNAMIC
cf-ray: 8db51a9677234cc2-BOS
connection: keep-alive
content-type: text/html; charset=utf-8
date: Thu, 31 Oct 2024 16:43:24 GMT
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
referrer-policy: strict-origin-when-cross-origin
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=%2BNocRXtnDFfHFhKZHqVcGwBr4ze5Pcwg3W1W7ixsAUJG30BRt4qA88GIyFU7hJoczK6qHJYkI8PE1yAbZJXxH7YochSMSdvifsbBCC6%2BFEiQR322myMa8Uv0vwsTx3wz3cFo7OeKYLpnzw%3D%3D"}],"group":"cf-nel","max_age":604800}
server: cloudflare
transfer-encoding: chunked
vary: Accept-Encoding
x-content-type-options: nosniff

access-control-allow-origin: *
cache-control: public, max-age=0, must-revalidate
cf-cache-status: DYNAMIC
cf-ray: 8db51a9677234cc2-BOS
connection: keep-alive
content-type: text/html; charset=utf-8
date: Thu, 31 Oct 2024 16:43:24 GMT
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
referrer-policy: strict-origin-when-cross-origin
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=%2BNocRXtnDFfHFhKZHqVcGwBr4ze5Pcwg3W1W7ixsAUJG30BRt4qA88GIyFU7hJoczK6qHJYkI8PE1yAbZJXxH7YochSMSdvifsbBCC6%2BFEiQR322myMa8Uv0vwsTx3wz3cFo7OeKYLpnzw%3D%3D"}],"group":"cf-nel","max_age":604800}
server: cloudflare
transfer-encoding: chunked
vary: Accept-Encoding
x-content-type-options: nosniff

https://cors-test.codehappy.dev/?url=https%3A%2F%2Faverwhy.net&origin=https%3A%2F%2Fcors-test.codehappy.dev%2F&method=get yes, they dont work on my dev branch: https://dev.aversite.pages.dev/ :Ermm: not for me lol

averwhyOP•3w ago

:rooThink:

Idle•3w ago

seems to be working for me too

averwhyOP•3w ago

thats so weird I swear if its my school's network...

Idle•3w ago

could very well be the reason

averwhyOP•2w ago

that would be strange though because I can see the images fine on the main site update, currently trying it on Mullvad vpn, with location set to Boston. still throwing 403's maybe? but i dont know why it wouldnt work on: https://dev.aversite.pages.dev/ http://localhost:8123 and only work on: https://averwhy.net yeah i just tried it on my unused chrome installation and it still throws on dev sites i should also note ive tried this across 3 computers: my mac, my windows laptop and windows desktop im going home from school this weekend so i will try it there :mhm:

Gaming

Programming

R2 throws 403 when loading an image on dev site