web-dev-qa-db-ja.com

JSONファイルをXMLHttpRequestでロードすると、Firefoxで「整形式でない」エラーが発生する

ページのJavaScriptがJavaScript Object Notation形式のオブジェクトを含むテキストファイルをロードすると、Firefox 3.0.7のエラーコンソールに「整形式でない」エラーが表示されます。ファイルにJSONオブジェクトしか含まれていない場合、エラーが生成されます。 <document> </ document>タグでオブジェクトをラップすると、エラーは発生しません。リクエストはどちらの方法でも成功するため、無視することもできますが、これらのメッセージでエラーログがいっぱいになるのは望ましくありません。

問題を説明するためのサンプルコードを次に示します。まず、「data.json」という「整形式でない」ファイル：

{ a: 3 }

次に、ファイルをロードするコードをいくつか示します。

var req = new XMLHttpRequest();
req.open("GET", "data.json");
req.send(null);

Firefoxエラーコンソールで次のエラーが生成されます。

整形式ではない
file：//path/to/data.json行：1
{a：3}
-^

Data.jsonがこれに変更された場合：

<document>{ a: 3 }</document>

エラーはありません。プレーンなJSONファイルは整形式のXMLドキュメントではないため、文句を言っていると思ったので、プレーンテキストとしてロードするように「送信」コールの前にMIMEタイプをオーバーライドしようとしましたが、うまくいきませんでした。

var req = new XMLHttpRequest();
req.open("GET", "data.json");
req.overrideMimeType("text/plain");
req.send(null);
// Still produces an error!

JSONデータをXMLドキュメントにラップして、XMLHttpRequestが実行している検証を回避し続けますが、プレーンテキストを無批判にロードし、それを検証します。あるいは、プレーンテキストで使用できるXMLHttpRequest以外のデータをロードする別の方法はありますか？

javascriptfirefoxxmlhttprequestmime-types
67
A. Levy

JSONにMIMEタイプを使用してみましたか？

application/json

.jsonファイルに対してこのMIMEタイプを自動的に送信するようにサーバーを構成することもできます。

71
jthompson

まず、真のJSONはJavaScriptよりもはるかに厳密であり、有効なJSONであるためには、キーを引用符で囲む必要があります。

 { "a": 3 }

また、裸のXMLHttpRequestを使用しているため、MIMEヘッダーで厳密に指定されていない限り、通常はXML結果を受信することを想定しています。

ただし、jQueryなどのJavaScriptフレームワークを使用するだけで、この問題をすべて取り除き、厄介なEdgeのすべてのケースに対処することで、自分の生活を楽にしたいと思うかもしれません。

$.getJSON("data.json",{}, function( data ){ 
  /*  # do stuff here  */ 
});

さらに、厳密なJSONを使用し、ライブラリを使用して抽象化する場合、ブラウザがネイティブJSONパーサーを使用し始めると、ライブラリはこれらを透過的に使用し、大幅な速度向上を実現できます。

（これは後ほど早く行われる予定であり、その場合、ユーザーは手間をかけずにサイレントアップグレードを取得できます！）。

20
Kent Fredric

これは、Content-Typeが完全に空の場合にも発生します（これにより、自然なタイプ検出が回避されます）。

5
Dustin Oprea

実際には{"a"：3}でなければなりません。

3
Julian Aubourg

同じエラーメッセージが見つかりましたが、原因は大きく異なります。 JSONコンテンツを少しの間無益に変更した後、誤ってサーバー（http：// localhost/〜me/Sites/mypage.html）。

3
prototype

サーバーによってContent-Type: application/jsonとしてマークされたリソースを要求するときに、[FireFoxで] XMLHttpRequest()でも同じ警告メッセージが表示されていました。

私にとってのトリックは、リクエストオブジェクトでXMLHttpRequest.responseTypeプロパティをjsonに明示的に設定することでした。例えば、

var request = new XMLHttpRequest();
request.onreadystatechange = function() { ... }
...
request.open('GET','https://random-domain.com/random-path',true);
request.responseType = 'json';
...
request.send();
1
focorner
Browser --- request expects a given content-type ---> Server
        <-- response contains content-type ----------

FirefoxはHTTP Content-Typeヘッダー を確認します。サーバーのHTTP応答ヘッダーがブラウザーのコードの期待と一致しない場合、このメッセージが表示されます。

私見このエラーメッセージは、「応答Content-Typeヘッダーを期待しています...が見つかりました...」のように、はるかに優れている可能性があります。

0
Christophe Roussy