CD
Cloudflare Developers•3mo ago
averwhy

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.
No description
10 Replies
averwhy
averwhyOP•3mo ago
:catAsk: :catAsk:
harshil1712
harshil1712•3mo ago
Hey, we need more information to understand the issue. How are you fetching the images? What CORS policy have you setup?
Idle
Idle•3mo ago
no error information no header information no WAF information no nothing
how exactly is anyone supposed to help you?
Flare
Flare•3mo 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)
averwhy
averwhyOP•3mo 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
averwhy
averwhyOP•3mo ago
:rooThink:
No description
Idle
Idle•3mo ago
seems to be working for me too
averwhy
averwhyOP•3mo ago
thats so weird I swear if its my school's network...
Idle
Idle•3mo ago
could very well be the reason
averwhy
averwhyOP•2mo 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:

Did you find this page helpful?