Modyfikacja kodu -ustawienie headersow

0

Hejka, jestem słaby bardzo w javascripcie, stworzyłem sobie w nim jedynie coś co wykorzystuje na stronie.
Pobieram dane poprzez api od cryptocompare

async function news() {
const response = await fetch('https://min-api.cryptocompare.com/data/news/feeds');
const logi = await response.json();
console.log(logi);
     
//   wysyłam do html
document.getElementById("feed0").textContent = logi[0].name;
document.getElementById("feed1").textContent = logi[1].name;
document.getElementById("feed2").textContent = logi[2].name;
 
news();

Jednak mam problem z CORS'ami, ponieważ wyskakuje błąd, wiem że muszę ustawić odpowiednie headersy, nic poza tym, od cryptocompare dostałem klucz dzięki któremu rozumiem mogę rozwiązać ten problem, ale muszę go zaimplementować w kodzie który znalazłem w dokumentacji mozilli odnośnie metody fetch i ustawiania headersów

async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *client
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return await response.json(); // parses JSON response into native JavaScript objects
}

Nie wiem jednak jak dostosować mój poprzedni kod do tego z dokumentacji, dodając ten headers z kluczem, które linijki są potrzebne a które do wyrzucenia i czy zmieni to w jakiś sposób odwoływanie się do elementów json niż dotychczas.

Prosiłbym bardzo o pomoc, dziękuje niezmiernie, pozdrawiam!

0

Z czego uruchamiasz ten skrypt? U mnie na serwerze Apache po wpisaniu w pasek wyszukiwania adres 127.0.0.1:8000/name_script.php, błędu nie ma.
Jeśli uruchamiasz ten plik przez protokół file:///, to podaj klucz jaki dostałeś z API.

Dobra wiem chyba, gdzie masz błąd w kodzie. Tam po prawej w zakomentowanym kodzie masz napisane no-cors, popraw niezakomentowany kod cors na no-cors i powinno działać.

mode: 'no-cors', // no-cors, *cors, same-origin
0

Uruchamiam po prostu lokalnie: js dołączony do htmla i w przeglądarce Opera/Chrome. Problem nie pojawia się za każdym razem, ale coraz częściej nie wyświetla mi segmentu strony odpowiedzialnego za wyświetlanie danych, które pobierane są z tego api a w konsoli pojawia się błąd odnośnie CORS'ów

Access to fetch at 'https://min-api.cryptocompare.com/data/news/feeds' from origin has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Wrzuciłem pliki na server cba i podobnie, raz wyświetli, raz wywali błąd, raz na jednej przeglądarce, raz na drugiej, lokalnie podobnie.
Dlatego zależy mi na dodaniu headers'a ale jak widać strasznie mało z tego wiem skoro nie potrafię zaimplementować kodu z dokumentacji i określić co z niego jest mi potrzebne, co nie i gdzie wstawić klucz. PS. Ja to robię w Javascript

edit: Ten drugi kod, jest z dokumentacji metody fetch, którego próbowałem też odpalać tak jak mówisz, ale to za mało. Gdzieś muszę wstawić z tego co dokumentacja API mi podpowiada:

API KEY in HEADER - add the following header to your request: authorization: Apikey {your_api_key}.

0

A może podczas ściągania danych z innego serwera leci jakiś błąd po drodze, dlatego nie wszystkie dane docierają i powinieneś to wyłapać w kodzie? A może po prostu hosting blokuje niektóre funkcjonalności?

0

Nie no nawet lokalnie ma mi to działać, zresztą głównie tak to sprawdzam ale przy okazji wrzuciłem na hosting i dzieje się to samo. Nie mam żadnego pliku php, sam javascript i html.
Odnośnie tego czy docierają wszystkie dane, to nawet jak próbuje po prostu jedną wartość pobrać poprzez to połączenie, mam błąd cors'ów i to czasami jest chyba normalne jeśli moja strona nie jest na tej samej domenie co API z którego biore dane, więc ustawia się headersy. Pobieram inne dane z tego samego API z innych linków, ale tam nie mam akurat problemu, metoda połączenia i wszystko tak samo. Tylko właśnie moja umiejetnośc javascript sprowadza się do pobrania danych, lekkiej obróbki i wysłania do htmla a dostosowanie tego kodu który podałem w nazwie tematu z dokumentacji mozilli odnośnie ustawienia headersów do mojego kodu jest ponad moją wiedzą, choć staram się drugi dzień :D

0

Jeśli nadal występuje problem, to może opakuj instrukcje w Promise. Do tego może spróbuj synchronicznie (czyli bez słowa kluczowego async) wysyłać requesty do API, ponieważ teraz wysyłasz je asynchronicznie. Gdybyś zastosował obiekt XMLHttpRequest, to jako tam, któryś parametr powinien być ustawiony na false.

httpRequest.open('GET', 'http://www.example.org/some.file', false);
0

Problem nadal istnieje, a metoda fetch await musi być w funkcji asynchronicznej bo inaczej wywala błąd, nie doszukiwałbym się w tym połączeniu czegoś złego zwłaszcza że działa tak jak oczekuje.
Po prostu brakuje fragmentu kodu z headersem i kluczem w nim do wpisania, przynajmniej tak mi sie wydaje.

1 użytkowników online, w tym zalogowanych: 0, gości: 1