6
Sono stato sorpreso da un'esperienza con i relativi percorsi in Javascript oggi. Ho bollito giù la situazione al seguente:Percorsi relativi con recupero in Javascript
Supponiamo di avere una struttura di directory simile:
app/
|
+--app.html
+--js/
|
+--app.js
+--data.json
Tutta la mia app.html fa è gestito js/app.js
<!DOCTYPE html>
<title>app.html</title>
<body>
<script src=js/app.js></script>
</body>
app.js carica il file JSON e lo attacca all'inizio di body:
// js/app.js
fetch('js/data.json') // <-- this path surprises me
.then(response => response.json())
.then(data => app.data = data)
I dati sono validi JSON, solo una stringa:
"Hello World"
Questo è un uso piuttosto minimale di fetch, ma sono sorpreso che l'URL che mi passa per fetch deve essere relativo alla app.html invece che rispetto al app.js. Mi aspetterei questo percorso al lavoro, dal momento che data.json e app.js sono nella stessa directory (js/):
fetch('data.json') // nope
C'è una spiegazione del perché questo è il caso?
JS può provenire da posizioni le cui cartelle non possono essere puntate a causa di SOP, quindi è sempre stato relativo alla pagina. – dandavis
Si noti che questo non ha molto a che fare con JavaScript; è il modo in cui i browser Web interpretano i percorsi nelle richieste HTTP. La pagina principale definisce il contesto URL per tutto: riferimenti di script, immagini, fogli di stile e XHR. – Pointy
Ciao, per quello che vale i percorsi CSS non funzionano in questo modo, sono relativi alla directory sorgente del foglio di stile - se hai, per esempio body {background-image: url (pic.gif)} in css/styles.css, quindi il browser cercherà pic.gif in css /, non /. Questo è il comportamento che mi aspetterei con JS, ma a quanto pare non è vero. – pat