"Access has been blocked by CORS policy" when loading SVG from prismic

[kris (Kristiyan Bogdanov)]

Hello,

I am trying to load a SVG from Prismic in my nextjs application using https://github.com/gilbarbara/react-inlinesvg

It works well on my localhost, but when I deploy it to production, the SVGs don't render and I get this error:

"Access to fetch at 'https://prismic-io.s3.amazonaws.com/tax-digital/a3a5e7eb-112b-40b4-8789-a609ed0bd6e7_Sole+Trader.svg' from origin 'https://tax-digital-website.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

Any advice on how I can fix this?

Thanks,
Kris

[Paulina ((On holiday, tag @team-education for help))]

Hey Kristiyan, thanks for reaching out.

CORS issues are very broad and happen for a various number of reasons. Sometimes it is related to the fact that your queries do not have the required access headers.

Could you share with me the query that is making this error appear?