JSON data wordt op server wel geladen, lokaal niet

vrijdag 12 april 2019 12:46

Acties:

0 Henk 'm!

Topicstarter

Hi allemaal,

Vandaag eens in JSON gedoken. Erg leuk maar ik loop bij een simpel script vast. Het draait NIET lokaal, maar WEL online op mijn server. Wat mijn uitprobeersel doet;
Ik open met een simpele HTML pagina een JSON-file en presenteer de inhoud. Zelf al de functie document-ready geprobeerd maar daar lukt het helaas niet mee. Iemand een idee hoe ik mijn code toch lokaal kan gebruiken?

Html:

code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("testdata.json", function(result){
      $.each(result, function(i, field){
        alert("field");
        $("div").append(field + " ");
      });
    });
  });
});
</script>

</head>
<body>

<button>Get JSON data</button>

<div></div>

</body>
</html>

testdata.json:

code:

{ 
  "firstName": "John",
  "lastName": "Doe",
  "age": 25
}

bvd
Joost

vrijdag 12 april 2019 12:49

Acties:

0 Henk 'm!

Matszs

><>

Heb je al gekeken in de console van je browser? Waarschijnlijk heeft het te maken met beveiliging zodat je niet zomaar bestanden van je PC kan openen, de console kan je daar alles over vertellen.

vrijdag 12 april 2019 12:50

Acties:

0 Henk 'm!

Ryan_

Gebruik je chrome? Volgende toevoegen aan je Chrome snelkoppeling:

code:

1	--allow-file-access-from-files

[ Voor 41% gewijzigd door Ryan_ op 12-04-2019 12:50 ]

vrijdag 12 april 2019 12:52

Acties:

0 Henk 'm!

joostvanpoppel

Topicstarter

Matszs schreef op vrijdag 12 april 2019 @ 12:49:
Heb je al gekeken in de console van je browser? Waarschijnlijk heeft het te maken met beveiliging zodat je niet zomaar bestanden van je PC kan openen, de console kan je daar alles over vertellen.

Nog niet, ga ik doen!

Ryan_ schreef op vrijdag 12 april 2019 @ 12:50:
Gebruik je chrome? Volgende toevoegen aan je Chrome snelkoppeling:
code:
1
--allow-file-access-from-files

Ik maak zowel gebruik van Chrome als IE, zelfde probleem

vrijdag 12 april 2019 12:58

Acties:

0 Henk 'm!

xleeuwx

developer Tweakers Elect

joostvanpoppel schreef op vrijdag 12 april 2019 @ 12:46:
[...]
Html:
code:
1
    $.getJSON("testdata.json", function(result){

Het probleem zit er vooral in dat hij testdata.json niet kan vinden. dit zou je terug moeten zien in je netwerk tab in je inspector.

Je zou kunnen proberen met een / voor testdata.json, echter kan het dan zo zijn dat het op de server weer niet werkt, afhankelijk in welke map deze zich bevind op de server.
Html:

code:

1	$.getJSON("/testdata.json", function(result){

vrijdag 12 april 2019 12:59

Acties:

0 Henk 'm!

joostvanpoppel

Topicstarter

Op de console krijg ik terug:

jquery.min.js:2 Access to XMLHttpRequest at 'file://evenanoniemgemaakt0002/Home$/Axxxx/Desktop/Feature%20Metric/testdata.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

.

Op een bepaalde manier te verhelpen?

[ Voor 3% gewijzigd door joostvanpoppel op 12-04-2019 13:00 ]

vrijdag 12 april 2019 13:03

Acties:

0 Henk 'm!

Ryan_

joostvanpoppel schreef op vrijdag 12 april 2019 @ 12:59:
Op de console krijg ik terug:

[...]
.

Op een bepaalde manier te verhelpen?

Ryan_ schreef op vrijdag 12 april 2019 @ 12:50:
Gebruik je chrome? Volgende toevoegen aan je Chrome snelkoppeling:
code:
1
--allow-file-access-from-files

vrijdag 12 april 2019 13:05

Acties:

0 Henk 'm!

xleeuwx

developer Tweakers Elect

Ryan_ schreef op vrijdag 12 april 2019 @ 12:50:
Gebruik je chrome? Volgende toevoegen aan je Chrome snelkoppeling:
code:
1
--allow-file-access-from-files

dit hierboven kan en zo zijn er voor verschillende browsers verschillende instellingen.

Echter het beste voor dit soort dingen is om gewoon een webserver lokaal te draaien.

voor windows: xampp, iss, wampp etc.
linux: nginx, apache etc

eventueel kan je ook bijv webstorm gebruiken waar een ingebouwde server inzit.

vrijdag 12 april 2019 13:06

Acties:

0 Henk 'm!

Jivebunny

Fail to plan. Plan to fail.

https://chrome.google.com...jpeacfghkpbjhddihlkkiljbi

Hiermee kan je er even snel omheen. Cross-Origin is standaard niet allowed en ook onveilig als je dit online open zet. De ontvanger van je json verzoek, dient de origin te accepteren. Met deze extensie kan je het lokaal wel even snel omzeilen, maar eigenlijk moet je op je localhost dit even netjes erin zetten.

Eventueel de flag `--disable-web-security` bij chrome gebruiken naast de andere flag.

[ Voor 9% gewijzigd door Jivebunny op 12-04-2019 13:07 ]

Pixel 9 Pro XL | NAS: HP Gen8 e3-1265L v2 16GB 12TB unRAID 6.9.2 | D: Ryzen 5600x 16GB 3000mhz RX 6800 XT MB Acer 27" IPS 144hz | Suzuki Swift 1.2 (2013)

vrijdag 12 april 2019 13:10

Acties:

0 Henk 'm!

joostvanpoppel

Topicstarter

Thanks voor de reacties, ik ga er mee aan de slag. Heb net wel met mijn lokale html de JSON online ingesloten, en dat werkt prima! Ik check die extensies voor het opstarten nog even!

zondag 14 april 2019 15:36

Acties:

0 Henk 'm!

Verwijderd

Je opent het html document verkeerd en krijgt vanwegebeveiligingsredenen geen toegang tot de harde schijf. Je hebt een webserver nodig om het json bestand te serveren, je zou hem bijvoorbeeld op github kunnen zetten en hem vandaar openen. En dan ff zoeken op json cors, of anders zelf een webserver opzetten met xamp, wamp, dan heb je geen last van cors

Vraag

Alle reacties