1. ホーム
  2. js

JSONの位置0にある予期しないトークン エラーが解決されました。

2022-01-23 17:45:08
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