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);
});