JSONの位置0にある予期しないトークン エラーが解決されました。
Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
When you send an HTTP request, possibly with Fetch or some other Ajax library, you may get this error, or a similar error.
Next I'll explain what this is causing and how we should fix these issues
1. 原因について
これらのエラーは、JSONではない戻り値を持つリクエストをサーバーに送信し、JSONメソッドでパースされたときに発生します。このようなことが起こるためのコードは、次のようになります。
fetch('/users').then(res => res.json())
実際のリクエストは問題なく、戻り値を取得します。問題の鍵は
res.json()
.
2. JSON.パース
他の方法を使用する
JSON.parse
をパースする場合、コードは次のようになります。
JSON.parse(`String that is not Json`);
JSON.parse()
res.json()
とは基本的に同じです。
JSON should start with a valid JSON value -- an object, array, string, number, or
A return value starting with < will have a hint like Unexpected token <.
The < symbol means that the return value is HTML and not JSON.
The root cause of this error is that the server is returning HTML or some other string that is not Json.
は同じなので、同じように発生します。
3. 無効なJSON
Unexpected token < in JSON at position 1
Unexpected token p in JSON at position 0
Unexpected token d in JSON at position 0
4. Solution
With fetch, you can use res.text() instead of res.json() to get the text string itself. Alter your code to read something like this, and check the console to see what's causing the problem:
The first thing to do is to print out the return value first. If you use fetch, you can use res.text() instead of res.json() to get the string. Convert your code to something like this, and look through the printout to see what's going wrong.
fetch('/users')
// .then(res => res.json()) // comment this out for now
.then(res => res.text()) // convert to plain text
.then(text => console.log(text)) // then log it out
なぜこのようなことが起こるのでしょうか?
JSON の位置 1" にある予期しないトークン o、またはその他の変数。
サーバーが返すものによって、エラーヒントの内容が異なるものもあります
異なるシンボルや場所を示唆するかもしれませんが、その理由は同じです。あなたのコードがパースしているすべてのJsonは、実際には有効なJsonではないのです。
以下は、私が見たエラーのヒントです。
res.json()
res.text()
app.get('/users', ...)
のようなコードに注意してください。
/
と
/
このようなメソッドは非同期式です。ですから、その戻り値を直接プリントアウトすることはできません。そのため、console.logは.thenの括弧の中に入れなければならないのです。
5.サーバーが原因なのでしょうか?
サーバーがJSONの代わりにHTMLを返す理由はいくつかあります。
- 要求された url は存在せず、サーバーは HTML として 404 ページを返します。 リクエストのコードエラー(/usersではなく/userと書くなど)、またはサーバー側のコードエラーの可能性があります。
-
新しいルートが追加されると、サーバーを再起動する必要があります。
たとえば、Express でサーバを記述している場合、新しい
/api/
を再起動しなかった場合、サーバーは新しいルートアドレスに応答しません。 - クライアント側のプロキシが設定されていない : Create React App のような Webpack の開発サーバーを使用している場合、バックエンドサーバーを指すプロキシを設定することができます。
-
APIのルートURLは
Is it a 404 page? (It may be missing that address or a code entry error). Is this an index.html page? (could be a missing address or proxy configuration error) If everything looks OK (new address added, server not restarted), then restart the front-end and back-end servers and see if the problem is solved
WebpackやCreate React App経由でプロキシを使用している場合は、APIルートがルートレベルでないことを確認してください。/
. これはプロキシサーバーを混乱させ、APIリクエストの戻り値の代わりにHTMLを取得することになります。次のようなプレフィックスを付けるとよいでしょう。/api/
.
また、devtoolsのネットワーク経由でリクエストの返り値を見ることができます。
Is it a 404 page? (It may be missing that address or a code entry error).
Is this an index.html page? (could be a missing address or proxy configuration error)
If everything looks OK (new address added, server not restarted), then restart the front-end and back-end servers and see if the problem is solved
関連
-
Uncaught TypeError: nullのプロパティ'addEventListener'を読み取れない 考えられる問題
-
JSエラーです。Uncaught TypeError: nullのプロパティ'addEventListener'を読み取ることができません。
-
nodeJS がエラーを報告する JSON の位置 1 に予期しないトークン o がある
-
JSON の位置 0 にある予期しないトークン u が解決されました。
-
JSONの位置0にある予期しないトークン<がエラー解決になりました。
-
CSS3 transformの回転角度の度数をjsで取得する方法、マトリックス解析
-
Chromeのレポートフォームの送信エラー、フォームが接続されていないため、フォームの送信がキャンセルされる
-
js は、エラー Uncaught TypeError を報告します。nullのプロパティ'appendChild'を読み取ることができません。
-
JSネイティブAjaxとjQuery Ajaxをコード例で紹介します。
-
js ajax 呼び出し 残りインターフェイス
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
オブジェクトが存在するにもかかわらず、null のプロパティ 'addEventListener' を読み込むことができません。
-
エラーです。nullのプロパティ'addEventListener'を読み取ることができません。
-
JS error Uncaught SyntaxError: JSON の位置 0 に予期しないトークン u があります。
-
uncaught typeerror cannot read property 'data' of undefined エラーの理由
-
Uncaught TypeErrorに関する質問です。プロパティ'onClick'にnullを設定できない。
-
Javascriptにおけるdocument.execCommand()の使用法
-
ActiveXObjectが定義されていない
-
layui (laydate) を使用すると、Cannot read property 'appendChild' of undefined というエラーが、どこをクリックしても表示されます。
-
document.getElementById は関数ではありません。
-
Uncaught TypeError: object is not a function の解決策です。