JSON .open - błąd odnośnika

Question

Witam

Dopiero zaczynam przygodę z AJAX oraz JSON. Stworzyłem kod w którym łącze się z plikiem JSON na podstawie poradnika: https://www.youtube.com/watch?v=rJesac0_Ftw&t=1286s ... gdy wstawiam w .open() odnośnik do pliku podanego w poradniku wszystko jest ok i funkcja przechodzi dalej. Na potrzeby swojej strony stworzyłem własny plik JSON, lecz gdy podmieniam odnośniki na mój to wtedy pojawia się:

 

Gdy zmieniam http na https to pokazuje sie connection Timeout.

Wersja z poradnika: .open("GET", "https://learnwebcode.github.io/json-example/animals-1.json")

Wersja moja: .open("GET", "http://aventhelast.prv.pl/gallery_data.json")

$(".galleryImg").on("click", function () {
    
    var number = $(this).attr("number");
    var ourResponse = new XMLHttpRequest();
   
    ourResponse.open("GET", "https://learnwebcode.github.io/json-example/animals-1.json");
    ourResponse.onload = function(){
        
        var ourData = JSON.parse(ourResponse.responseText);
        renderHTML(ourData, number);
    };
    ourResponse.send();
});

 

Answer 1

Problemem jest Same Origin Policy, czyli jedna z podstawowych polityk bezpieczeństwa w webie, która mówi, że domyślnie JavaScript ma dostęp tylko i wyłącznie do danych z tego samego kontekstu/źródła (ang. origin) definiowanego przez domenę (np. example.com) + port (np. 443) + protokół (np. HTTPS).

To znaczy tyle, że jeśli odpalasz Swój skrypt w kontekście https://example.com i w kodzie masz open na https://example.com/cośtam, to wszystko będzie działać. Ale jeśli zmienisz open na http://gynvael.coldwind.pl/cokolwiek, to działać przestanie (bo oba konteksty będą różne, więc dostęp zostanie zabroniony z uwagi na SOP).

Żeby umożliwić dostęp do różnych danych pomiędzy kontekstami serwer obcego kontekstu (tj. tego z którego JS próbuje pobrać dane) musi wyrazić na to zgodę poprzez wysłanie odpowiedniego nagłówka HTTP - nazywa się to Cross-Origin Resource Sharing (CORS) i jest dokładnie opisane np. na wiki - https://en.wikipedia.org/wiki/Cross-origin_resource_sharing#Simple_example

Co oznacza mniej więcej tyle, że:

1. Masz skrypt JS i plik JSON w różnych kontekstach.
2. Nie "wysyłasz serwerem" odpowiednich nagłówków CORS dla JSONa.

Poprawić to możesz tez na dwa sposoby:

1. Przenieść JSON na tą samą domenę+port+protokół w kontekście której uruchamiasz skrypt JS.
2. Albo dodać nagłówki CORS po stronie serwera dla owego JSONa.

 

Comments

Skorzystałem z 1 opcji.

Dodałem całość na Hosting, gdzie pojawia się: Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

a linia kodu którą wstawiłem to:

.open("GET", "http://portfolio-aven.prv.pl/js/gallery_data.json");

Będę wdzięczny jeśli zerkniesz także u siebie na portfolio-aven.prv.pl

---

zmieniłem odnośnika na: .open("GET", "js/gallery_data.json");

i wszystko działa, ale nie jestem pewien czy tak powinno się robić.

---

Jest OK - możesz dodać jeszcze / z przodu, tj "/js/gallery_data.json", dzięki temu ścieżka będzie bezwzględna, tj. podstrony w innych katalogach też będą szukać danych w tym samym miejscu, a nie w podkatalogu "js" względem miejsca umieszczenia podstrony.

---

Dzięki wielkie za pomoc, sporo się dowiedziałem. Pozdrawiam