CORS error for figma image

I keep getting this error when trying to GET a Figma frame image.

Access to image at ‘[xxxxxxxx]’ from origin ‘[origin]’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.[xxxxxxxx]

why do i get this when i try to get the image resource from Figma? if i implicitly it from an it works fine… My origin is listed in My App, my crossOrigin is set correctly…

You need to proxy it

only issue is that’s gotta have privacy implications for my users Figma stuff right? Are there proxy options that offer privacy?

You can proxy through your own server: download an image on the server and send it to the client.

Ah ok, yeah am gonna do that, but annoying as I then have to use up storage for a user’s Figma frames though.

You don’t have to save them. Check out some guides for image proxy for your backend language of choice. Usually you just receive the request as a data stream and translate this stream right to the client.

Had the same issue solved it thru this article Building Interactive Figma Widgets | CSS-Tricks - CSS-Tricks

If you are using NextJS, check out the link: