"SyntaxError：JSONの位置0の予期しないトークン<"
Facebook風のコンテンツフィードを処理するReactアプリコンポーネントで、私はエラーに遭遇しています。
Feed.js：94 undefined "parsererror" "SyntaxError：JSONの位置0に予期しないトークン<があります
私は同様のエラーに遭遇しました。そして、それはレンダリング機能の中でHTMLのタイプミスであることが判明しました、しかしそれはここのケースではないようです。
さらに紛らわしいことに、私はコードを以前の動作確認済みのバージョンにロールバックしましたが、それでもエラーが発生します。
Feed.js：
import React from 'react';
var ThreadForm = React.createClass({
getInitialState: function () {
return {author: '',
text: '',
included: '',
victim: ''
}
},
handleAuthorChange: function (e) {
this.setState({author: e.target.value})
},
handleTextChange: function (e) {
this.setState({text: e.target.value})
},
handleIncludedChange: function (e) {
this.setState({included: e.target.value})
},
handleVictimChange: function (e) {
this.setState({victim: e.target.value})
},
handleSubmit: function (e) {
e.preventDefault()
var author = this.state.author.trim()
var text = this.state.text.trim()
var included = this.state.included.trim()
var victim = this.state.victim.trim()
if (!text || !author || !included || !victim) {
return
}
this.props.onThreadSubmit({author: author,
text: text,
included: included,
victim: victim
})
this.setState({author: '',
text: '',
included: '',
victim: ''
})
},
render: function () {
return (
<form className="threadForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange} />
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange} />
<input
type="text"
placeholder="Name your victim"
value={this.state.victim}
onChange={this.handleVictimChange} />
<input
type="text"
placeholder="Who can see?"
value={this.state.included}
onChange={this.handleIncludedChange} />
<input type="submit" value="Post" />
</form>
)
}
})
var ThreadsBox = React.createClass({
loadThreadsFromServer: function () {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function (data) {
this.setState({data: data})
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString())
}.bind(this)
})
},
handleThreadSubmit: function (thread) {
var threads = this.state.data
var newThreads = threads.concat([thread])
this.setState({data: newThreads})
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: thread,
success: function (data) {
this.setState({data: data})
}.bind(this),
error: function (xhr, status, err) {
this.setState({data: threads})
console.error(this.props.url, status, err.toString())
}.bind(this)
})
},
getInitialState: function () {
return {data: []}
},
componentDidMount: function () {
this.loadThreadsFromServer()
setInterval(this.loadThreadsFromServer, this.props.pollInterval)
},
render: function () {
return (
<div className="threadsBox">
<h1>Feed</h1>
<div>
<ThreadForm onThreadSubmit={this.handleThreadSubmit} />
</div>
</div>
)
}
})
module.exports = ThreadsBox
Chrome開発者ツールでは、この機能からエラーが発生しているようです。
loadThreadsFromServer: function loadThreadsFromServer() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function (data) {
this.setState({ data: data });
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
console.error(this.props.url, status, err.toString()の行に下線が引かれています。
エラーはサーバーからJSONデータを取得することと関係があるように思われるので、空白のdbから始めようとしましたが、エラーは解決しません。 Reactが継続的にサーバーへの接続を試行し、最終的にブラウザをクラッシュさせるため、このエラーは無限ループで呼び出されるようです。
編集：
Chromeの開発ツールとChrome RESTクライアントを使用してサーバーの応答を確認しましたが、データは適切なJSONのようです。
編集2：
意図されたAPIエンドポイントは確かに正しいJSONデータとフォーマットを返していますが、Reactは期待されるhttp://localhost:3000/?_=1463499798727の代わりにhttp://localhost:3001/api/threadsをポーリングしています。
バックエンドデータを返すために、エクスプレスアプリケーションをポート3001で実行しながら、ポート3000でWebpackホットリロードサーバーを実行しています。ここでイライラしているのは、これが前回作業したときに正しく機能していたために、変更して破損した可能性があるものが見つからないことです。
エラーメッセージの文言は、JSON.parse('<...')を実行したときにGoogle Chromeから得られるものに対応しています。私はあなたがサーバーがContent-Type:application/jsonを設定していると言ったことを知っています、しかし私は応答 body が実際にHTMLであると信じるように導かれます。
Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0"
console.error(this.props.url, status, err.toString())の行に下線が引かれています。
errは実際にはjQuery内にスローされ、変数errとしてあなたに渡されました。行に下線が引かれているのは、単にそれがあなたがそれをログに記録しているところだからです。
ロギングを追加することをお勧めします。レスポンスの詳細については、実際のxhr（XMLHttpRequest）プロパティをご覧ください。 console.warn(xhr.responseText)を追加してみると、おそらくHTMLを受け取っているはずです。
サーバーからHTML（またはXML）を受け取っていますが、dataType: jsonはjQueryにJSONとして構文解析するよう指示しています。サーバーの応答の内容を確認するには、Chrome開発ツールの[ネットワーク]タブを確認してください。
これは私にとってパーミッションの問題になってしまいました。 cancanで許可されていないURLにアクセスしようとしていたので、URLをusers/sign_inに切り替えました。リダイレクトされたURLは、jsonではなくhtmlに応答します。 htmlレスポンスの最初の文字は<です。
このエラー「SyntaxError：JSONの位置に予期しないトークンmがあります」が発生しました。トークン 'm'は他の文字でもかまいません。
DBテストにRESTconsoleを使用していたときに、JSONオブジェクト内の二重引用符の1つ（{"name：" math "}）を見逃していました。正しいものは{" name "：" math "}です。
この不器用な間違いを理解するのに私は多大な努力を要しました。私は他の人が同じようなばかげたことに遭遇することを恐れています。
私の場合、私はこれを実行しているwebpackを入手していました、そしてそれはローカルのnode_modulesディレクトリのどこかで何らかの破損であることが判明しました。
rm -rf node_modules
npm install
...それはまたそれを正しく機能させるのに十分でした。
私の場合、エラーは戻り値を変数に割り当てていないことが原因です。次のエラーメッセージが表示されました。
return new JavaScriptSerializer().Serialize("hello");
私はそれを次のように変更しました。
string H = "hello";
return new JavaScriptSerializer().Serialize(H);
変数JSONがないと、データを正しくフォーマットできません。
チュートリアルの後に同じエラーメッセージが表示されました。私たちの問題は、Ajax呼び出しの中の 'url：this.props.url'のようです。あなたが要素を作成しているときのReact.DOMでは、私のものはこのように見えます。
ReactDOM.render(
<CommentBox data="/api/comments" pollInterval={2000}/>,
document.getElementById('content')
);
さて、このCommentBoxはその小道具にURLを持っていません、ただデータを持っています。 url: this.props.url - > url: this.props.dataを切り替えると、サーバーへの正しい呼び出しが行われ、期待されるデータが返されました。
助けになれば幸いです。
応答がJSON形式であることを確認してください。それ以外の場合はこのエラーが発生します。
私の問題は、適切なJSONフォーマットではないstringでデータを取り戻していることでした。それを解析しようとしました。 simple example: JSON.parse('{hello there}')はhにエラーを出します。私の場合、コールバックURLはオブジェクトの前に不要な文字を返していました：employee_names([{"name":....そして0でeでエラーが発生していました。
私の場合、AzureがホストするAngular 2/4サイトの場合、mySiteルーティングの問題が原因で、mySite/api/...へのAPI呼び出しがリダイレクトされていました。そのため、api JSONではなくリダイレクトされたページからHTMLを返していました。 APIパスのweb.configファイルに除外を追加しました。
サイトとAPIが異なるポートにあるため、ローカルで開発しているときにこのエラーが発生しませんでした。これを実行するためのおそらくよりよい方法があります...しかしそれはうまくいきました。
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<!-- ignore static files -->
<rule name="AngularJS Conditions" stopProcessing="true">
<match url="(app/.*|css/.*|fonts/.*|assets/.*|images/.*|js/.*|api/.*)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
<action type="None" />
</rule>
<!--remaining all other url's point to index.html file -->
<rule name="AngularJS Wildcard" enabled="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
create-react-appを使用しており、ローカルのjsonファイルを取得しようとしている人。
create-react-appと同様に、webpack-dev-serverはリクエストの処理に使用され、リクエストごとにindex.htmlを処理します。だからあなたはなってきています
SyntaxError：JSONの0位置に予期しないtoken <があります。
これを解決するには、アプリを取り出してwebpack-dev-server設定ファイルを修正する必要があります。
here から手順に従うことができます。
このエラーは、レスポンスをapplication/jsonとして定義し、レスポンスとしてHTMLを取得しているときに発生します。基本的に、これはJSONのレスポンスで特定のURLのサーバーサイドスクリプトを書いているときに起こりましたが、エラーフォーマットはHTMLです。
これは古いかもしれません。しかし、それは角度的に発生しただけなので、リクエストとレスポンスのコンテンツタイプは私のコードでは異なりました。だから、ヘッダをチェックして、
let headers = new Headers({
'Content-Type': 'application/json',
**Accept**: 'application/json'
});
react axios内
axios({
method:'get',
url:'http:// ',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},
responseType:'json'
})
jQuery Ajax：
$.ajax({
url: this.props.url,
dataType: 'json',
**headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},**
cache: false,
success: function (data) {
this.setState({ data: data });
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
あなたのjavascriptコードがいくつかのjsonレスポンスを見ていて、あなたがテキストのような何か他のものを受け取ったことが原因でこれが起こるかもしれません。
私にとっては、JSONとして返すオブジェクトのプロパティの1つが例外をスローしたときに起こりました。
public Dictionary<string, int> Clients { get; set; }
public int CRCount
{
get
{
var count = 0;
//throws when Clients is null
foreach (var c in Clients) {
count += c.Value;
}
return count;
}
}
Nullチェックを追加し、私のためにそれを修正しました：
public Dictionary<string, int> Clients { get; set; }
public int CRCount
{
get
{
var count = 0;
if (Clients != null) {
foreach (var c in Clients) {
count += c.Value;
}
}
return count;
}
}
一般的なレベルでは、このエラーは構文エラーがあるJSONオブジェクトが解析されたときに発生します。 messageプロパティにエスケープされていない二重引用符が含まれているようなものを考えてください。
{
"data": [{
"code": "1",
"message": "This message has "unescaped" quotes, which is a JSON syntax error."
}]
}
アプリケーションのどこかにJSONがある場合は、 JSONLint を介して実行して構文エラーがないことを確認してください。私の経験ではこれは当てはまりませんが、原因となるAPIからJSONが返されるのが普通です。
レスポンスボディに無効なJSONを含むContent-Type:application/json; charset=UTF-8ヘッダーを含むレスポンスを返すHTTP APIに対してXHRリクエストが行われると、このエラーが発生します。
サーバーサイドAPIコントローラーが構文エラーを不適切に処理していて、それが応答の一部として出力されている場合は、返されるJSONの構造が壊れます。この良い例は、レスポンスボディにPHP WarningまたはNoticeを含むAPIレスポンスです。
<b>Notice</b>: Undefined variable: something in <b>/path/to/some-api-controller.php</b> on line <b>99</b><br />
{
"success": false,
"data": [{ ... }]
}
95％の時間がこれが私の問題の原因となっていますが、他の回答では多少解決されていますが、明確に説明されているとは感じませんでした。どのAPIレスポンスにJSON構文エラーが含まれているかを突き止める便利な方法を探しているなら、これが役に立ちます。 Angularモジュールを書きました 。
これがモジュールです：
/**
* Track Incomplete XHR Requests
*
* Extend httpInterceptor to track XHR completions and keep a queue
* of our HTTP requests in order to find if any are incomplete or
* never finish, usually this is the source of the issue if it's
* XHR related
*/
angular.module( "xhrErrorTracking", [
'ng',
'ngResource'
] )
.factory( 'xhrErrorTracking', [ '$q', function( $q ) {
var currentResponse = false;
return {
response: function( response ) {
currentResponse = response;
return response || $q.when( response );
},
responseError: function( rejection ) {
var requestDesc = currentResponse.config.method + ' ' + currentResponse.config.url;
if ( currentResponse.config.params ) requestDesc += ' ' + JSON.stringify( currentResponse.config.params );
console.warn( 'JSON Errors Found in XHR Response: ' + requestDesc, currentResponse );
return $q.reject( rejection );
}
};
} ] )
.config( [ '$httpProvider', function( $httpProvider ) {
$httpProvider.interceptors.Push( 'xhrErrorTracking' );
} ] );
詳細は上記のブログ記事で見つけることができます、それはおそらくすべてが関連しているわけではないので、私はここで見つかるすべてをここに掲示していません。
私はWordpress REST APIで同様の経験をしました。 Postmanを使用して、正しいルートまたはエンドポイントがあるかどうかを確認しました。私は後で自分のスクリプト内に誤って「エコー」を入れていることを知りました - フック：
つまり基本的に、これはAJAX errorを引き起こすスクリプトと混在するJSONではない値を出力したことを意味します - 「SyntaxError：JSONの位置0の予期しないトークンr」
jsonファイルにコメントアウトされていないことを確認してください。
//comments here will not be parsed and throw error
私は同じ問題を抱えていました。私はAngular 7で作られたクライアントにレスポンスを送るために簡単なnode.jsサーバーを使っています。しかし、どういうわけか、Angularはそれを解析できませんでした。
私の場合（バックエンド）、res.send（token）を使用していました。
Res.send（data）に変更すると、すべてが修正されました。
すべてが意図したとおりに機能し、投稿されている場合、これを確認することができますが、エラーはフロントエンドに表示され続けます。
これに多くの時間を費やした後、私の場合、問題は私のpackage.jsonファイルで定義された「ホームページ」を持っていたことが私のアプリがfirebase上で動作しないことでした（同じ 'token'エラー）。 create-react-appを使用して反応型アプリケーションを作成した後、READ.meファイルのfirebaseガイドを使用してgithubページにデプロイし、ルーターを動作させるために追加の作業を行う必要があることを認識し、firebaseに切り替えました。 githubガイドはpackage.jsonにホームページキーを追加し、デプロイの問題を引き起こしました。
Pythonでは、結果をhtmlテンプレートに送信する前にjson.Dump（str）を使用することができます。この結果をJSON.parse（result）に送信した後、これは正しい応答であり、これを使用できます。
答えを追加するだけでなく、それはあなたのAPI応答が含まれているときにも起こります
<?php{username: 'Some'}
あなたのバックエンドがPHPを使用している場合はこれが当てはまります。
Protip：ローカルのNode.jsサーバーでjsonをテストしますか？そのパスへのルーティングがまだないことを確認してください。
'/:url(app|assets|stuff|etc)';