Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Displaying the Content

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
210,128 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,842 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.

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
210,128 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

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!