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 Displaying the Content

Posted by Marc Sanchez
Marc Sanchez
20,039 Points

Workspaces has been blocked by CORS

I'm getting the following error, "Access to fetch at 'https://dog.ceo/dog-api/breeds-list' from origin 'http://port-80-5omz7rsm19.treehouse-app.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

Here's my code:

const select = document.getElementById('breeds'); const card = document.querySelector('.card'); const form = document.querySelector('form');

// ------------------------------------------ // FETCH FUNCTIONS // ------------------------------------------ fetch('https://dog.ceo/dog-api/breeds-list') .then(response => response.json()) .then(data => console.log(data))

fetch('https://dog.ceo/api/breeds/image/random') .then(response => response.json()) .then(data => generateImage(data.message));

// ------------------------------------------ // HELPER FUNCTIONS // ------------------------------------------ function generateImage(data) { const html = <img src="${data}" alt> <p>click to view images of ${select.value}s</p> ; card.innerHTML = html; }

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

It looks like this code is using the wrong URL for this API in the first "fetch". Here's what the video shows:

fetch('https://dog.ceo/api/breeds/list') //...
Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

Not sure why Steven's answer was downvoted here because he is correct. You have used the wrong URL for your fetch request. The one shown by Steven and the one used in the video works fine and doesnt give you the CORS error.

Seth Lewis
.a{fill-rule:evenodd;}techdegree seal-36
Seth Lewis
Full Stack JavaScript Techdegree Graduate 18,191 Points

Steven,

I'm using the code from the snippet above and getting the 404 error. Are you getting that as well as of October 2020?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

After starting with the original code, and then making the correction shown here, I get this in the console:

Object {
  message: ["affenpinscher", "african", "airedale", "akita", "appenzeller", "australian", "basenji",
            // 87 other breeds were shown, but omitted here for compactness
           ]
  status: "success"
}
John Greer
John Greer
12,029 Points
John Greer
John Greer
12,029 Points

Hey I ran into this same issue. I did some googling and found there are some tools to allow you to bypass this warning. This Stack Overflow answer offered this tool you can use as a proxy in front of your URL to get around this browser block.

You can set constants and use concatenation to append that to the front of all your URLs, but since I'm just trying to follow along with the video, I just added it in front and got this code which doesn't trigger the CORS error in browser

fetch(`https://cors-anywhere.herokuapp.com/https://dog.ceo/api/breeds/list/`)
    .then(response=>response.json())
    .then(data => console.log(data))

Hope this helps. I don't totally understand what's happening with the CORS error. It does seems specific to browsers though, since I can run a GET request to https://dog.ceo/api/breeds/list/ just fine using Postman, an app interface for making web requests to APIs.

Good luck!