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

Developing with Prismic
1

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-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

2 Likes
2

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?

4

This issue has been closed due to inactivity. Flag to reopen.

5

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

8

Hey Team,

Can you show us the query you are doing for this?

9

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 example. I've linked a screenshot of a working CDN HTTP request / response below:

10

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.

11

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

1 Like
12

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

1 Like
13

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

14

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?

16

Hi Tony,

Can you try clearing the cache in your project? Then check if you still see this error?

Thanks.

18

Hey Phil,
How do I clear the cache in the project?

19

What technology is your project built with?

20

Vue using nuxtjs. It's hosted on Heroku. There's a scheduled daily restart of the dyno in Heroku too.

23

Is there someone that can help us with this issue? Are we the only ones that are having this problem??
@team-code @Phil @team-education

28

Hi Tony,

I'll still can't figure out what's going on here. Are you using Vue-inline-svg also?

I think the issue here is that everyone is using either Vue-inline-svg or react-inlinesvg and I believe these plugins are caching the remote SVG's can you try removing this plugin and see if it helps?

Thanks.

31

@Phil We aren't using either of those libraries. We're using node's svg-injector 1.1.3. We've tried clearing our build cache and redeploying the application with no luck. The current behavior we are seeing is on the initial load of the site our SVGs are being blocked due to CORS but if we refresh the page the svgs load properly. We haven't deployed a new build of our site since late July with this issue only arising about a month ago.

Can you confirm that the prismic CORS configuration is properly setup in AWS

svc Tony Milne and I are a part of the same team.

32

Hi Jake,

Sorry about the long wait for a reply.

I believe the SVG's have now got the correct configuration on AWS, can you confirm if you're still seeing this issue.