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,531 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!

2 Answers

Steven Parker
Steven Parker
230,688 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 only.

Ava Jones
Ava Jones
10,531 Points

Thank you, Steven!

It worked!

Richard Morrison
Richard Morrison
6,156 Points

I added both: [.]teamtreehouse.com [.]treehouse-app.net

And it worked.

James Edens
James Edens
723 Points

You only need to do it for the specific URL of the page you are using. You don't have to do it for all of treehouse.com or all of treehouse-app.net. When you clicked the arrow next to treehouse-app.net you will get a list of URLS, just find the URL that matches what your browers has for the site you are trying to use. You can also just use this link: chrome://settings/content/siteDetails?site=REPLACE_WITH_URL_HERE to bring up the page for that specific URL and select allow insecure content. For example: chrome://settings/content/siteDetails?site=https://port-80-z4wh0lm6c8.ecs-production.treehouse-app.net

Ava Jones
Ava Jones
10,531 Points

Thank you, James, for your assistance. I managed to fix the settings issue myself and have made significant progress, so there's no need for further worry.