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

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:
Created 7 years ago
Comments:5 (3 by maintainers)

Top 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