2016-04-02 16 views
6

Ich war überrascht von einer Erfahrung mit relativen Pfaden in Javascript heute. Ich habe die Situation an folgende kocht:Relative Pfade mit fetch in Javascript

Angenommen, Sie eine Verzeichnisstruktur haben wie:

app/ 
    | 
    +--app.html 
    +--js/ 
     | 
     +--app.js 
     +--data.json 

Alle meine app.html läuft wird js/app.js

<!DOCTYPE html> 
<title>app.html</title> 
<body> 
<script src=js/app.js></script> 
</body> 

app.js lädt die JSON-Datei und klebt es am Anfang von body:

// js/app.js 
fetch('js/data.json') // <-- this path surprises me 
    .then(response => response.json()) 
    .then(data => app.data = data) 

Die Daten gültig JSON, nur eine Zeichenfolge:

"Hello World" 

Dies ist eine ziemlich geringe Nutzung von fetch, aber ich bin überrascht, dass die URL, die ich fetch passieren muss, anstatt relativ zu app.html sie relativ zu app.js. Ich würde erwarten, dass dieser Weg zu arbeiten, da data.json und app.js sind im gleichen Verzeichnis (js/):

fetch('data.json') // nope 

Gibt es eine Erklärung dafür, warum dies der Fall ist?

+2

JS kann von Orten kommen, auf deren Ordner aufgrund von SOP nicht gezeigt werden kann, daher war es immer seitenbezogen. – dandavis

+1

Beachten Sie, dass dies nicht wirklich viel mit JavaScript zu tun hat; Auf diese Weise interpretieren Web-Browser Pfade in HTTP-Anfragen. Die Hauptseite definiert den URL-Kontext für alles: Skriptreferenzen, Bilder, Stylesheets und XHRs. – Pointy

+0

Hallo, für was es wert ist CSS-Pfade funktionieren nicht auf diese Weise, sie sind relativ zum Quellverzeichnis des Stylesheets - wenn Sie sagen, Körper {background-image: url (pic.gif)} in css/styles.css sucht der Browser nach pic.gif in css /, not /. Das ist das Verhalten, das ich mit JS erwarten würde, aber anscheinend ist es nicht wahr. – pat

Antwort

7

Wenn Sie sagen, fetch('data.json') Sie effektiv http://yourdomain.com/data.json anfordern, da es relativ zu der Seite ist, von der Sie die Anfrage machen. Sie sollten mit einem Schrägstrich vorwärts führen, der angibt, dass der Pfad relativ zum Domänenstamm ist: fetch('/js/data.json'). Oder voll und ganz mit Ihrer Domain fetch('http://yourdomain.com/js/data.json').