I’m getting a CORS error when trying to fetch a JSON file from Vercel Blob Storage. I’m fetching from a Framer site using their Fetch functionality. The console error message says: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
The browser blocks the request due to preflight issues.
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 @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.
@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.