Относительные пути с извлечением в Javascript

Я был удивлен опытом с относительными путями в Javascript сегодня. Ive сводило ситуацию к следующему:

Предположим, что у вас есть структура каталогов, например:

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

Выполняется все мои app.html js/app.js

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

app.js загружает файл JSON и вставляет его в начало body:

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

Данные действительны JSON, просто строка:

"Hello World"

Это довольно минимальное использование fetch, но я удивлен, что URL-адрес, который я передаю в fetch, должен относиться к app.html вместо относительного app.js. Я ожидаю, что этот путь будет работать, поскольку data.json и app.js находятся в одном каталоге (js/):

fetch('data.json') // nope

Есть ли объяснение, почему это так?

Ответ 1

Когда вы говорите fetch('data.json'), вы действительно запрашиваете http://yourdomain.com/data.json, так как оно относится к той странице, на которую вы делаете запрос. Вы должны вести с косой чертой, которая указывает, что путь относится к корню домена: fetch('/js/data.json'). Или полностью качество с вашим доменом fetch('http://yourdomain.com/js/data.json').