Формат url для выборки для получения данных json из api

Я новичок в использовании API и различных методов получения данных. Я слежу за парой руководств, включая этот метод выборки on или XMLHttpRequest для получения данных, и могу делать это только с помощью API, используемого в обучающих программах. Я надеюсь использовать этот API, но у меня проблемы, я думаю, только с формой URL. Я получаю эту ошибку:

“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' “

Я попытался использовать «https», чтобы избежать ошибки CORS, но затем получил эту ошибку:

net::ERR_CONNECTION_REFUSED.

Я могу вернуть json, если пропущу этот URL прямо в браузере: http://collections.anmm.gov.au/collections/json.

Я хотел бы знать, есть ли у меня проблема с URL-адресом, который я пытаюсь сделать, или, возможно, есть проблема с самим api, которая мешает мне получить доступ к данным.

Заранее благодарим за любые указатели.

Это мой код javascript:

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)
});

Установите headers ....

Sumesh TG 31.10.2018 12:07

Для тех, кто ищет помощи, я нашел этот ответ полезным -stackoverflow.com/questions/43871637/…

user3471259 01.11.2018 11:54
0
2
723
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для тех, кто ищет помощи, я нашел этот ответ полезным -В запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin - при попытке получить данные из REST API.

Я изменил код на следующий и успешно вернул ожидаемый json:

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?"))

Другие вопросы по теме