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

Developing with Prismic
33

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

35

Have same issue as this thread "Access has been blocked by CORS policy" when loading SVG from prismic - #2 by Paulina where I'm trying to fetch an SVG file but rejected by CORS. Tried both requesting from AWS's address and Prismic CDN lead to problem where No 'Access-Control-Allow-Origin' header is present on the requested resource.
What would be the best way to get uploaded SVG files rendered as inline with React? Can prismic possibly returned text for SVG files so that clients do not have to fetch individual file? Or add additional CORS header to the CDN?

1 Like
37

Hi Rizky,

Can you please provide some screenshots and the errors you are getting, and It will be very useful to provide a way to reproduce the issue on our side.

38

Thanks, @rizky for providing that info, I have been able to reproduce the issue and I have created an issue for it in our issue tracker.

We will let you know in case of any updates.

40

Hi Fares, thanks for the update. Looking forward to hear the fix soon!

Cheers

41

I'm also having this issue where i'm trying to change the svg fill of the logo but can't because prismic forces me to use an <img>

The error I get (which I'm sure will be the same for everyone)
Screenshot 2021-05-10 at 12.27.19

This is the third client project I've run into this issue on this year (3/3) so at least for me it's a pretty common request

Logos and icons are very likely to sit over varying coloured sections (whether that be website themes or just changing background colours) and uploading multiple variants to accommodate different styles is very impractical, while keeping these all in code is very unfriendly for clients to edit.

42

Hi Dan,

Can you please list the repository names and a link to the SVG files that are failing (in a private message if necessary)?

In fact, there is already an issue created in our tracker for this.

43

Has there been any movement on this? we're experiencing the same issue in one of our projects loading svgs using both the svginjector package and vue-inline-svg in both cases we get the CORS issue preventing the svgs from loading inline

44

@jdonese Did your team ever resolve this? / if you did do you mind sharing your solution?

46

Hi Everyone,

This should be resolved with updates to SVGs in the AWS server.

Let me know if you're still seeing this.

Thanks.

48

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

51

Was there ever a resolution to this? I'm seeing the same problem when trying to fetch SVGs from Prismic with XMLHttpRequest/Fetch API.

Worth to mention I'm trying to run it from localhost:3000, and thus getting:

Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin

53

Hey @isak, I believe this particular error can be solved by adding the correct credentials to your server. I found this thread online that explains it: javascript - Origin <origin> is not allowed by Access-Control-Allow-Origin - Stack Overflow.

Try it out and let us know how it goes.