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
206,336 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,739 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 Parker
Steven Parker
206,336 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!