Hey @benfwalla could you give us the code you're using to make the fetch requests? Or even better a preview url to your framer site where we can see the issue? Thanks!

PS: I just tried to fetch in my chrome console and it worked nicely so I am curious what's going wrong here.

Yeah, it works for me in Chrome as well, which is making me think the issue lies in Framer. Maybe it's better to go over to their forum.

Here's a could screenshots of the Network tab in Framer when I try the fetch. Looks like it makes two requests. The first request (the preflight) appears to return a 200, while the second request is an error with the response: Failed to load response data: No data found for resource with given identifier

Here's the link to my Framer site! Still in testing. You'll find the fetch issue happening in the text box that currently reads "Error": https://firstmover.framer.website/

Hey @vvoyer , I think I was able to isolate the problem a bit more.

To recap, when I tried fetching my Vercel blob on Framer, it returned a CORS error.

I just tried fetching this json endpoint from jsonplaceholder.com on Framer, and it worked perfectly.

The difference was that the jsonplaceholder's preflight OPTIONS response headers contained:

1
access-control-allow-credentials: true
2
access-control-allow-headers: content-type
3
access-control-allow-methods: GET,HEAD,PUT,PATCH,POST,DELETE
4
access-control-allow-origin: https://{my-project}.framercanvas.com

...while the Vercel Blob's OPTIONS response headers only had:

1
access-control-allow-origin: *

Do you think these lack of headers from Vercel could be the reason for the CORS error? Thanks!

@benfwalla We recently shipped this community post on CORS, might be helpful for your usecase?

https://community.vercel.com/t/various-ways-of-using-cors-on-vercel/5127

Do you think these lack of headers from Vercel could be the reason for the CORS error? Thanks!

It could definitely be the reason! I also see you fixed your production issue by proxying to the blob instead perhaps?

Hey @benfwalla we dug deep and finally found the exact issue (thanks to your debugging), Framer does a fetch request with content-type: json, which triggers a CORS request and expects Access-Control-Allow-Headers to have "content-type" (just like jsonplaceholder.com).

We're updating our service to have this change so you won't need anymore your proxy method. I'll keep you posted once this is fully deployed.

@benfwalla A fix has now been released, you can check on this Framer preview that downloading a blob with their Fetch feature works: https://smart-needs-267772.framer.app/

Thanks a lot again!

@vvoyer legend, thank you!! So, I eventually ended up building my own API endpoint with all the required headers and OPTIONS requirements, but I'm glad that you found a native blob solution here. 🙏

Having visibility in the Dashboard to see all the Headers that Vercel would send would be helpful.