Hello, I am trying to load a SVG from Prismic in my nextjs application using GitHub - gilbarbara/react-inlinesvg: An SVG loader component for ReactJS 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…

Hi Everyone, This should be resolved with updates to SVGs in the AWS server. Let me know if you're still seeing this. Thanks.

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?

I am also having this issue intermittently. I am using the Vue-inline-svg component to load svgs into a page client side and am seeing these errors from the was CDN. Image here https://drive.google.com/file/d/1oclgas_8tAx_9_fh8rU9hizdSkYdUieD/view?usp=sharing

Hey Team, Can you show us the query you are doing for this?

Hi, This isn't a Prismic query, the HTTP request to the prismic-io CDN goes via the vue-inline-svg component. The user's browser attempts to load the SVG inline in the document. The CDN is returning the error above which breaks the page load. This is an intermittent error. It is working now for ex…

I'm not exactly sure what the issue could be so I'm reaching out to the team to get help with this one. I'll let you know once I have more information.

Hi! We are experiencing the exact same issue with the latest version of Chrome. Details here: https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

Could this be related to a permissions issue in Prismic's CORS permissions on their S3 bucket?

This is what I'm thinking. I know the team are working on that. I'm still trying to get follow up information.

I appreciate the feedback. This is a critical issue and we have no work around. Much of our images are using SVGs from the Prismic media content bucket. Is this an high-priority ticket with the Prismic team?

Hi Tony, Can you try clearing the cache in your project? Then check if you still see this error? Thanks.

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

Developing with Prismic

Topic		Replies	Views
Fetch inline SVGs Developing with Prismic reactjs	0	1291	March 30, 2021
Access blocked by CORS policy when loading .riv media from Prismic Developing with Prismic	1	376	February 1, 2024
Access to fetch at <Fetching API URL> from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource Developing with Prismic graphql	1	2693	May 31, 2021
Prismic has encountered an error [Try Again] Developing with Prismic page-builder	6	324	January 16, 2025
Request header field prismic-ref is not allowed by Access-Control-Allow-Headers in preflight response Developing with Prismic graphql	35	7849	March 8, 2021

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

Related topics