question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

icons.svg loading problem with CDN

See original GitHub issue

Issue Description

When using CDN, I got this error and can’t load icons.svg

XMLHttpRequest cannot load https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.1.0/ui/icons.svg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

You can reproduce with changing index.html.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Trumbowyg by Alex-D</title>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.1.0/ui/trumbowyg.min.css">
    </head>
    <body>
        <div id="main" role="main">
            <header>
                <h1>Default usage of Trumbowyg</h1>

                <p>
                    No plugin, no options. Just naked Trumbowyg.
                </p>
            </header>

            <div id="editor">
                <h2>This editor is the default build of Trumbowyg.</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident optio nam reiciendis eius beatae quibusdam!
                </p>
                <p>
                    The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: &quot;Neither is there anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
                </p>
            </div>

            <h2>The code</h2>
            <code><pre>
$('#editor').trumbowyg();
            </pre></code>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.1.0/trumbowyg.min.js"></script>
        <script>
            /** Default editor configuration **/
            $('#editor').trumbowyg();
        </script>
    </body>
</html>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
LucaColombicommented, May 17, 2017

Same problem, even with plain http and not https:

XMLHttpRequest cannot load http://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.5.1/ui/icons.svg. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://ethicsoft.it’ is therefore not allowed access.

The script become unusable from CDN 😕

Any idea for workarounds other than include the SVN directly in the source (in facts no CDN) or modify the http headers (too tricky and invasive for my case)? Even better solve this in the main source?

0reactions
Alex-Dcommented, May 17, 2017

http://alex-d.github.io/Trumbowyg/documentation.html#svg-icons

Check the “Use SVG icons without XHR or via an another protocol than HTTP(S)” section

Read more comments on GitHub >

github_iconTop Results From Across the Web

Pro Content Editor can't load SVG icons from CDN - Themeco
I've tried adding ui.svg to the list of files to not load from CDN, but it always defaults to loading from the CDN...
Read more >
Can't get SVG files to NOT load from CDN - WordPress.org
While using Pro Builder, we can't see any icons because we get the error “Unsafe ... So I try to make sure that...
Read more >
How to cache SVG icons on an external CDN while avoiding ...
The closest I could get is loading an SVG in an image element and then using it like an "old-fashioned" image sprite.
Read more >
Using SVGs from a CDN? - Adam Berkowitz, Web Developer
svg into the /icons directory in the current project. It'll even make the directory if it doesn't exist.
Read more >
Icons (svg) are not visible - Rey theme – Support
This problem is related to the fact that an SVG file (which inside has xml code) is linked from an external source (the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found