web-dev-qa-db-fra.com

Chemins relatifs avec fetch en Javascript

J'ai été surpris par une expérience avec des chemins relatifs en Javascript aujourd'hui. J'ai résumé la situation comme suit:

Supposons que vous ayez une structure de répertoires comme:

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

Tous mes app.html ne s'exécute js/app.js

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

app.js charge le fichier JSON et le colle au début de body:

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

Les données sont du JSON valide, juste une chaîne:

"Hello World"

Il s'agit d'une utilisation assez minimale de fetch, mais je suis surpris que l'URL que je passe à fetch doive être relative à app.html au lieu de par rapport à app.js. Je m'attendrais à ce que ce chemin fonctionne, puisque data.json et app.js sont dans le même répertoire (js/):

fetch('data.json') // nope

Y a-t-il une explication pour laquelle c'est le cas?

javascriptpathrelative-pathfetch-api
18
user2467065

Lorsque vous dites fetch('data.json'), vous demandez effectivement http://yourdomain.com/data.json Car il est relatif à la page à partir de laquelle vous effectuez la demande. Vous devez conduire avec une barre oblique, ce qui indiquera que le chemin est relatif à la racine du domaine: fetch('/js/data.json'). Ou entièrement de qualité avec votre domaine fetch('http://yourdomain.com/js/data.json').

25
j_ernst