Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Asynchronous Programming with JavaScript Asynchronous JavaScript with Callbacks Async Programming and Callback Functions

Ava Jones
Ava Jones
10,218 Points

Getting a console error, please help!

I am getting the following error:

callbacks.js:16 Mixed Content: The page at 'https://port-80-lqi0ktaju8.ecs-production.treehouse-app.net/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.open-notify.org/astros.json'. This request has been blocked; the content must be served over HTTPS.

Here is my code:

const astrosUrl = 'http://api.open-notify.org/astros.json';
const wikiUrl = 'https://en.wikipedia.org/api/rest_v1/page/summary/';
const peopleList = document.getElementById('people');
const btn = document.querySelector('button');

// Make an AJAX request
function getJSON(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = () => {
    if(xhr.status === 200) {
      let data = JSON.parse(xhr.responseText);
      console.log(data);
    }
  };
  xhr.send();
}

// Generate the markup for each profile
function generateHTML(data) {
  const section = document.createElement('section');
  peopleList.appendChild(section);
  // Check if request returns a 'standard' page from Wiki
  if (data.type === 'standard') {
    section.innerHTML = `
      <img src=${data.thumbnail.source}>
      <h2>${data.title}</h2>
      <p>${data.description}</p>
      <p>${data.extract}</p>
    `;
  } else {
    section.innerHTML = `
      <img src="img/profile.jpg" alt="ocean clouds seen from space">
      <h2>${data.title}</h2>
      <p>Results unavailable for ${data.title}</p>
      ${data.extract_html}
    `;
  }
}

getJSON(astrosUrl);

I've tried to mess the with http in the URLs by giving them both https and I get a different error:

Failed to load resource: net::ERR_CONNECTION_REFUSED

I'm not sure what's going on so any help would be appreciated!

1 Answer

Steven Parker
Steven Parker
229,745 Points

It sounds like you might have a setting in your browser that causes it to reject mixed security mode content. Just go to your browser settings and change it to allow insecure content. I use Chrome, and in that browser you can set that value on a per-website basis so I just allow it as the default for Treehouse.

Ava Jones
Ava Jones
10,218 Points

Thank you, Steven!

It worked!