2016-04-02 75 views
6

今日、Javascriptの相対パスでの経験に驚いた。私は、次のように状況を煮詰めてきました:Javascriptでフェッチした相対パス

のようなディレクトリ構造があるとします。すべての私のapp.htmlはありませんが実行され

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

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のかなり最小限の使用量があるが、私は私がfetchに渡すURLがapp.htmlに対する代わりのに比べなければならないことに驚いていますapp.jsdata.jsonapp.jsが同じディレクトリ(js/)であるので、私は、このパスが動作することを期待します:

fetch('data.json') // nope 

は、このようなケースである理由の説明はありますか?

+2

JSは、SOPのためにフォルダを指すことができない場所から来る可能性があります。したがって、ページは常に相対的です。 – dandavis

+1

JavaScriptにはあまり関係がないことに注意してください。 WebブラウザがHTTP要求のパスを解釈する方法です。メインページでは、スクリプト参照、イメージ、スタイルシート、XHRなど、すべてのURLコンテキストを定義します。 – Pointy

+0

こんにちは、CSSパスはこのようには動作しませんが、スタイルシートのソースディレクトリとの関連性があります。たとえばbody {background-image:url(pic.gif)}がcss/styles.cssの場合、ブラウザはpic.gifを/ではなくcss /で探します。それは私がJSで期待する動作ですが、明らかにそれは真実ではありません。 – pat

答えて

7

あなたはそれがあなたからのリクエストを行っているページに関連しているので、あなたが効果的にhttp://yourdomain.com/data.jsonを要求しているfetch('data.json')言います。フォワードスラッシュを使用すると、ドメインルートとの相対パスであることが示されます。fetch('/js/data.json')またはドメインfetch('http://yourdomain.com/js/data.json')で十分な品質。