TwitchTV CORS Error

Hi Everyone,

After solving all other CORS issues and getting my code to work in my browser (not in CodePen), running it in CodePen gives me this error:

Access to Font at ‘https://static.codepen.io/assets/telefon/bold/af889c53-1ee3-4868-8fdc-2b310d587b50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff’ from origin ‘https://codepen.io’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header has a value ‘http://codepen.io’ that is not equal to the supplied origin. Origin ‘https://codepen.io’ is therefore not allowed access.

I’ve been trying to debug this issue for hours and have poured over the FCC and StackOverflow forums with no success. I’d appreciate any help on this.

Again, it works perfectly when I’m just running it in the browser via my text editor:

But when I run it in CodePen, this error shows up. I’ve tried adding in headers that account for Access-Control-Allow-Origin and origin: https://codepen.io, but nothing has worked.

The project can be found here: https://codepen.io/chzwzrd/pen/EEOdyw
And my JS below:

$(document).ready(() => {
    const users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

    const renderLink = (userData) => {
        const streamer = userData._links.self.split('streams/')[1];
        const newStream = $("<td>");
        const newLink = $("<a>");
        $(newLink).addClass('streamer-link').html(streamer);
        $(newLink).attr('href', `https://www.twitch.tv/${streamer}`);
        $(newLink).attr('target', '_blank');
        $(newStream).append(newLink);

        return newStream;
    };

    const renderData = (userData) => {
        if (userData.stream === null) {
            const newRow = $("<tr>");
            const newStream = renderLink(userData);

            const newStatus = $("<td>");
            $(newStatus).html("Offline");

            $(newRow).append(newStream).append(newStatus).append("<td>--</td><td>--</td>");
            $("tbody").append(newRow);
        }
        else {
            const newRow = $("<tr>");
            const newStream = renderLink(userData);

            const newStatus = $("<td>");
            $(newStatus).html("Live");

            const newTitle = $("<td>");
            $(newTitle).html(userData.stream.game);

            const newDesc = $("<td>");
            $(newDesc).html(userData.stream.channel.status);

            $(newRow).append(newStream).append(newStatus).append(newTitle).append(newDesc);
            $("tbody").append(newRow);
        }
    };

    const getUsers = arr => {
        arr.map((user, i) => {
            $.getJSON(`https://wind-bow.gomix.me/twitch-api/streams/${user}?callback=?`, userData => {
                renderData(userData);
            });
        });
    };

    getUsers(users);
});

Yeah, I’ve been noticing that error a lot too. It seems to be an issue with codepen trying to load fonts. It appears to be an internal problem, behind the scenes. For example, if I start a completely empty project and open the console, the same errors pop-up, so it has nothing to do with your project, it’s a codepen problem.

1 Like

Yea that makes sense, it just randomly popped up all of a sudden even though the code was working fine before. Thanks for the clarification!