Build an fCC Forum Leaderboard - CORS error

JavaScript
1

Tell us what’s happening:

i cant fetch data so i cant test the output, how to fix this. and please tell me what i did wrong, i dont see anyone encounter the same problem like this. thx

Access to fetch at ‘https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json’ from origin ‘https://www.freecodecamp.org’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.Understand this error
cdn.freecodecamp.org/curriculum/forum-latest/latest.json:1 Failed to load resource: net::ERR_FAILEDUnderstand this error
frame.ts:339 TypeError: Failed to fetch
at _callee$ (about:srcdoc:372:44)
at tryCatch (about:srcdoc:238:1062)
at Generator. (about:srcdoc:238:3012)
at Generator.next (about:srcdoc:238:1699)
at asyncGeneratorStep (about:srcdoc:239:103)
at _next (about:srcdoc:240:194)
at about:srcdoc:240:364
at new Promise ()
at about:srcdoc:240:97
at _fetchData (about:srcdoc:385:21)

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */const forumLatest =
  'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json';
const forumTopicUrl = 'https://forum.freecodecamp.org/t/';
const forumCategoryUrl = 'https://forum.freecodecamp.org/c/';
const avatarUrl = 'https://cdn.freecodecamp.org/curriculum/forum-latest';
const postsContainer = document.getElementById("posts-container");

const allCategories = {
  299: { category: 'Career Advice', className: 'career' },
  409: { category: 'Project Feedback', className: 'feedback' },
  417: { category: 'freeCodeCamp Support', className: 'support' },
  421: { category: 'JavaScript', className: 'javascript' },
  423: { category: 'HTML - CSS', className: 'html-css' },
  424: { category: 'Python', className: 'python' },
  432: { category: 'You Can Do This!', className: 'motivation' },
  560: { category: 'Back-End Development', className: 'backend' }
};

function timeAgo(timestamp) {
  const timeVar = Date.now() - (new Date(timestamp));
  if(timeVar >= 86400000)
    return `${Math.floor(timeVar / 86400000)}d ago`;
  else if(timeVar >= 3600000)
    return `${Math.floor(timeVar / 3600000)}h ago`;
  else if(timeVar >= 60000)
    return `${Math.floor(timeVar / 60000)}m ago`;
}

function viewCount(arg) {
  return arg >= 1000 ? Math.floor(arg / 1000) + "k" : arg;
}

function forumCategory(id) {
  if(allCategories.hasOwnProperty(id)) {
    const chosen = allCategories[id];
    return `<a href="${forumCategoryUrl}${chosen.className}/${id}" class="category ${chosen.className}">${chosen.category}</a>`
  }
  else {
    return `<a href="${forumCategoryUrl}general/${id}" class="category general">General</a>`
  }
}


function avatars(posters, users) {
  console.log(posters, users);
  let results = "";
  for(const poster of posters) {
    const user = users.find(usr => usr.id === poster.user_id);
    results += `<img alt="${user.name}" src="${avatarUrl+user.avatar_template.replace("{size}", "30")}">`;
  }   
  return results;
}

function showLatestPosts(arg) {
  const results = "";
  for(const topic of arg.topic_list.topics){
  const {id, title, views, posts_count, slug, posters, category_id, bumped_at} = topic;
  results += `<tr><td><a class="post-title" href="${forumTopicUrl+slug+id}">${title}</a>${forumCategory(category_id)}</td>`
  results += `<td><div class="avatar-container">${avatars(posters, users)}</div></td>`
  results += `<td>${posts_count-1}</td><td>${views-1}</td><td>${bumped_at}</td></tr>`
  }
  
  postsContainer.innerHTML = `${results}`;
}

async function fetchData() {
  return fetch(forumLatest)
  .then(response => response.json())
  .then(data => showLatestPosts(data))
  .catch(error => console.error(error));
}

fetchData();

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

2

Hi @s1conan ,

I’m seeing a TypeError in the console:
[TypeError: "results" is read-only]

Happy coding!

3

thx, but i already fixed that, that is not the problem. the console that i pasted are the problem. the error shown on fcc console is “[TypeError: Failed to fetch]”, the console i pasted are from developer tools.

4

Please post your updated code if you need more help.

5

AAA
AAA2588×1274 495 KB

this is my updated code, still raise the same error. before, the typeerror “results” readonly not even shown on my console because of this error, feels like this stopped everything from continuing.

const forumLatest = 'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json';
const forumTopicUrl = 'https://forum.freecodecamp.org/t/';

const forumCategoryUrl = ' https://forum.freecodecamp.org/c/ ';

const avatarUrl = 'https://cdn.freecodecamp.org/curriculum/forum-latest';

const postsContainer = document.getElementById("posts-container");



const allCategories = {

  299: { category: 'Career Advice', className: 'career' },

  409: { category: 'Project Feedback', className: 'feedback' },

  417: { category: 'freeCodeCamp Support', className: 'support' },

  421: { category: 'JavaScript', className: 'javascript' },

  423: { category: 'HTML - CSS', className: 'html-css' },

  424: { category: 'Python', className: 'python' },

  432: { category: 'You Can Do This!', className: 'motivation' },

  560: { category: 'Back-End Development', className: 'backend' }

};



function timeAgo(timestamp) {

  const timeVar = Date.now() - (new Date(timestamp));

  if(timeVar >= 86400000)

    return \`${Math.floor(timeVar / 86400000)}d ago\`;

  else if(timeVar >= 3600000)

    return \`${Math.floor(timeVar / 3600000)}h ago\`;

  else if(timeVar >= 60000)

    return \`${Math.floor(timeVar / 60000)}m ago\`;

}



function viewCount(arg) {

  return arg >= 1000 ? Math.floor(arg / 1000) + "k" : arg;

}



function forumCategory(id) {

  if(allCategories.hasOwnProperty(id)) {

    const chosen = allCategories\[id\];

    return \`<a href="${forumCategoryUrl}${chosen.className}/${id}" class="category ${chosen.className}">${chosen.category}</a>\`

  }

  else {

    return \`<a href="${forumCategoryUrl}general/${id}" class="category general">General</a>\`

  }

}




function avatars(posters, users) {

  console.log(posters, users);

  let results = "";

  for(const poster of posters) {

    const user = users.find(usr => usr.id === poster.user_id);

    results += \`<img alt="${user.name}" src="${avatarUrl+user.avatar_template.replace("{size}", "30")}">\`;

  }   

  return results;

}



function showLatestPosts(arg) {

  let results = "";

  for(const topic of arg.topic_list.topics){

  const {id, title, views, posts_count, slug, posters, category_id, bumped_at} = topic;

  results += \`<tr><td><a class="post-title" href="${forumTopicUrl+slug+id}">${title}</a>${forumCategory(category_id)}</td>\`

  results += \`<td><div class="avatar-container">${avatars(posters, users)}</div></td>\`

  results += \`<td>${posts_count-1}</td><td>${views-1}</td><td>${bumped_at}</td></tr>\`

  }

  

  postsContainer.innerHTML = \`${results}\`;

}



async function fetchData() {

  return fetch(forumLatest)

  .then(response => response.json())

  .then(data => showLatestPosts(data))

  .catch(error => console.error(error));

}



fetchData();
6

I’ve tried editing your post to improve the readability of the code, but it still contains more escape characters than I care to spend time fixing. Please re-post your code using the following instructions:

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read. The backticks need to be on a separate line above your code.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8

sorry :sweat_smile: this is my 1st ever needing to post. i updated my code

BTW, i passed the test even with the error and no data shown in preview. :rofl: but i still really like to know how to fix this and why only me have this problem. thank you

bbb
bbb2620×1296 592 KB

removed by moderator

9

Congratulations on solving the challenge! You should be proud of your achievement…we are! But we are removing your working solution, so it is not available to others who have not yet done the work to get there. Again, congrats!

1 Like
10

I don’t know why you received the CORS error. I never saw that on my end. But I’m glad you were able to get past that and move on!

image
image1010×478 40.3 KB

When I ran your code in the fCC editor, the preview showed data.

1 Like
11

but i still would like to know why i cant fetch the data like shown on the screenshot.

i can test the output by changing the url

const forumLatest = "https://forum-proxy.freecodecamp.rocks/latest";

and when all but step 27 ticks change the url back

const forumLatest = 'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json';

maybe this would help someone else that have problem like me or maybe it will help you to find and fix this bug. :grinning_face_with_smiling_eyes:

thank you for your help :smiley:

12

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

1 Like