I am new to using apis and the various methods to get data. I have been following a couple of tutorials including this one on fetch method on or XMLHttpRequest method to get data and can do this just with the apis used in the tutorials. I am hoping to use this api but am having trouble, I think with just the form of the url. I am getting this error:
“Access to fetch at ' http://collections.anmm.gov.au/collections ' from origin ' http://localhost:8888 ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' “
I have tried using "https" to avoid the CORS error but then get this error:
net::ERR_CONNECTION_REFUSED.
I can return json if I past this url directly into the browser: http://collections.anmm.gov.au/collections/json .
What I would like to know is do I just have a problem with the url I am trying or if perhaps there is an issue with the api itself that is preventing me accessing the data.
Thanks in advance for any pointers.
This is my javascript code:
function createNode(element){
return document.createElement(element);
}
function addClass(cls, el){
return el.classList.add("cls");
}
function append(parent, el){
return parent.appendChild(el);
}
const div = document.getElementById('root');
div.setAttribute('class', 'container');
//const url = 'https://randomuser.me/api/?results=100';
//can return data from this url
const url ='http://collections.anmm.gov.au/collections' // returns data if pasted directly into the browser
//const url = 'http://collections.anmm.gov.au/collections/json' // this is the format suggested in the api documentation I think
fetch(url)
.then((resp)=> resp.json())
.then(function(data){
//create and append the list to the ul
let authors = data.results; // get results
return collections.map(function(collection){
let card = createNode('div'),
// img = createNode('img'),
h1 = createNode('h1');
card.setAttribute('class', 'card');
img.src = collection.notes.value;
h1.innerHTML = `${collection.notes.value} ${collection.notes.value}`;
append(card, h1);
append(div, card);
})
})
.catch(function(error){
console.log(error)
});
For those looking for help, I found this answer helpful - No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
I changed by code to the following and successfully returned the json I was expecting:
const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "http://collections.anmm.gov.au/collections/json"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.json())
.then(contents => console.log(contents))
.then(function(data){
let authors = data.results;
console.log(authors);
return authors.map(function(author){
let card = createNode('div'),
// img = createNode('img'),
h1 = createNode('h1');
card.setAttribute('class', 'card');
// img.src = author.picture.medium;
h1.innerHTML = `${author.name.first} ${author.name.last}`;
//append(card, img); // append all our elements
append(card, h1);
append(div, card);
})
})
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.