Problem z fetchowaniem zewnętrznego API " Access to fetch at "<link> from origin 'null' has been blocked by CORS policy"

Question

Cześć, chciałbym uzyskać dostęp do danych z tego https://www.goodreads.com/api API. Przykładowo chciałbym wyświetlić książki danego autora Przykładowe dane. 

W dokumentacji API pisze, że powinienem podać 3 parametry: 

• key: Developer key (required).

• id: Goodreads Author id (required)

• page: 1-N (default 1)

Developer key już uzyskałem, a to mój kod: 

fetch(
        "https://www.goodreads.com/author/list.xml?" +
          new URLSearchParams({
            key: "API_KEY",
            id: 1850,
            page: 1,
          })
      )
        .then((res) => res.text())
        .then((str) => new window.DOMParser().parseFromString(str, "text/xml"))
        .then((data) => console.log(data));

w konsoli dostaję błąd: Access to fetch at 'https://www.goodreads.com/author/list.xml?key=API_KEY&id=1850&page=1' from origin 'null' 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.

 

Ktoś wie jak to naprawić i uzyskać dostęp do tych danych? 

Answer 1

Komunikat wskazuje na to, że odpalasz plik z dysku. Ajax działa tylko dla plików odpalonych z serwera, więc najlepiej wyposażyć się w takowy, np. przy pomocy XAMPP-a.

Niemniej to i tak nie rozwiązuje problemu, bo GoodReads nie przesyłają odpowiedniego nagłówka, który by pozwalał na pobieranie danych Ajaksem. Zostaje zatem albo skorzystanie z własnego serwera i pobranie danych przy jego pomocy, albo usługi pokroju https://cors-anywhere.herokuapp.com/

PS nie ujawniaj swojego klucza developerskiego na forum.

Comments

PS nie ujawniaj swojego klucza developerskiego na forum.

(wyciąłem)