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 trialAva Jones
10,682 PointsGetting 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
231,269 PointsIt 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.
Piotr Manczak
Front End Web Development Techdegree Graduate 29,363 PointsHad the same problem. i allowed an insecure content. Let's hope it won't end badly, like virus-badly.
James Edens
723 PointsYou 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
10,682 PointsThank 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.
Ava Jones
10,682 PointsAva Jones
10,682 PointsThank you, Steven!
It worked!
Richard Morrison
6,156 PointsRichard Morrison
6,156 PointsI added both: [.]teamtreehouse.com [.]treehouse-app.net
And it worked.