“SyntaxError: Token tak terduga <di JSON di posisi 0”

Dalam komponen aplikasi Bereaksi yang menangani umpan konten seperti Facebook, saya mengalami kesalahan:

Feed.js: 94 tidak terdefinisi "parsererror" "Sintaksaksir: Token tak terduga <dalam JSON di posisi 0

Saya mengalami kesalahan serupa yang ternyata menjadi kesalahan ketik pada HTML di dalam fungsi render, tapi sepertinya tidak demikian di sini.

Lebih membingungkan lagi, saya menggulirkan kode kembali ke versi yang sebelumnya dikenal bekerja dan saya masih mendapatkan kesalahan.

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

Di alat pengembang Chrome, kesalahan tampaknya berasal dari fungsi ini:

 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)
    });
  },

dengan garis yang console.error(this.props.url, status, err.toString()digarisbawahi.

Karena sepertinya kesalahannya ada hubungannya dengan menarik data JSON dari server, saya mencoba mulai dari db kosong, tetapi kesalahan tetap ada. Kesalahan tampaknya disebut dalam infinite loop mungkin karena Bereaksi terus menerus mencoba untuk terhubung ke server dan akhirnya crash browser.

EDIT:

Saya telah memeriksa respons server dengan alat dev Chrome dan klien REST Chrome, dan data tampaknya JSON yang tepat.

EDIT 2:

Tampaknya meskipun titik akhir API yang dimaksudkan memang mengembalikan data dan format JSON yang benar, Bereaksi melakukan polling dan http://localhost:3000/?_=1463499798727bukan yang diharapkan http://localhost:3001/api/threads.

Saya menjalankan server hot-reload webpack pada port 3000 dengan aplikasi ekspres berjalan pada port 3001 untuk mengembalikan data backend. Yang membuat frustrasi di sini adalah bahwa ini berfungsi dengan benar saat terakhir kali saya mengerjakannya dan tidak dapat menemukan apa yang bisa saya ubah untuk memecahkannya.

Kata-kata dari pesan kesalahan sesuai dengan apa yang Anda dapatkan dari Google Chrome saat Anda menjalankan JSON.parse('<...'). Saya tahu Anda mengatakan server sedang diatur Content-Type:application/json, tetapi saya dituntun untuk percaya bahwa badan tanggapan sebenarnya HTML.

Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0"

dengan garis yang console.error(this.props.url, status, err.toString())digarisbawahi.

Itu errbenar-benar dilemparkan ke dalam jQuery, dan diteruskan kepada Anda sebagai variabel err. Alasan bahwa garis digarisbawahi adalah hanya karena di situlah Anda mencatatnya.

Saya menyarankan agar Anda menambahkan ke log Anda. Melihat properti aktual xhr(XMLHttpRequest) untuk mempelajari lebih lanjut tentang respons. Coba tambahkan console.warn(xhr.responseText)dan Anda kemungkinan besar akan melihat HTML yang sedang diterima.

Anda menerima HTML (atau XML) kembali dari server, tetapi dataType: jsonmemberitahu jQuery untuk menguraikan sebagai JSON. Periksa tab "Jaringan" di alat Chrome dev untuk melihat konten respons server.

Ini akhirnya menjadi masalah izin bagi saya. Saya mencoba mengakses url yang tidak saya miliki otorisasinya dengan cancan, jadi url dialihkan ke users/sign_in. url yang diarahkan merespons ke html, bukan json. Karakter pertama dalam respons html adalah <.

Saya mengalami kesalahan ini "SyntaxError: Token tak terduga m di JSON di posisi", di mana token 'm' dapat berupa karakter lain.

Ternyata saya melewatkan salah satu tanda kutip ganda di objek JSON ketika saya menggunakan RESTconsole untuk tes DB, seperti {"name:" math "}, yang benar adalah {" name ":" math "}

Butuh banyak usaha untuk mencari tahu kesalahan canggung ini. Saya takut orang lain akan bertemu dengan gelandangan serupa.

Dalam kasus saya, saya mendapatkan ini menjalankan webpack, dan ternyata ada beberapa korupsi di suatu tempat di dir node_modules lokal.

rm -rf node_modules
npm install

... sudah cukup untuk membuatnya berfungsi kembali.

Saya kasus saya kesalahan adalah hasil dari saya tidak menetapkan nilai kembali ke variabel. Berikut ini menyebabkan pesan kesalahan:

return new JavaScriptSerializer().Serialize("hello");

Saya mengubahnya menjadi:

string H = "hello";
return new JavaScriptSerializer().Serialize(H);

Tanpa variabel JSON tidak dapat memformat data dengan benar.

Kesalahan ini terjadi ketika Anda mendefinisikan respons sebagai application/jsondan Anda mendapatkan HTML sebagai respons. Pada dasarnya, ini terjadi ketika Anda menulis skrip sisi server untuk url tertentu dengan respons JSON tetapi format kesalahan dalam HTML.

Pastikan respons dalam format JSON jika tidak akan memicu kesalahan ini.

saya menghadapi masalah yang sama
saya menghapus dataType: 'json' dari metode $ .ajax

Saya memiliki pesan kesalahan yang sama setelah tutorial. Masalah kami tampaknya adalah 'url: this.props.url' dalam panggilan ajax. Di React.DOM ketika Anda membuat elemen Anda, milik saya terlihat seperti ini.

ReactDOM.render(
    <CommentBox data="/api/comments" pollInterval={2000}/>,
    document.getElementById('content')
);

Nah, Kotak Komentar ini tidak memiliki url dalam alat peraga, hanya data. Ketika saya beralih url: this.props.url->url: this.props.data , itu membuat panggilan yang benar ke server dan saya mendapatkan kembali data yang diharapkan.

Saya harap ini membantu.

Masalah saya adalah bahwa saya mendapatkan kembali data stringyang tidak dalam format JSON yang tepat, yang kemudian saya coba parsing. simple example: JSON.parse('{hello there}')akan memberikan kesalahan pada jam. Dalam kasus saya, url callback mengembalikan karakter yang tidak perlu sebelum objek:employee_names([{"name":.... dan mendapatkan error at e pada 0. URL callback saya sendiri memiliki masalah yang ketika diperbaiki, hanya mengembalikan objek.

Dalam kasus saya, untuk situs 2/4 Azure host Angular, panggilan API saya ke mySite / api / ... dialihkan karena masalah routing mySite. Jadi, itu mengembalikan HTML dari halaman yang diarahkan alih-alih api JSON. Saya menambahkan pengecualian dalam file web.config untuk jalur api.

Saya tidak mendapatkan kesalahan ini ketika mengembangkan secara lokal karena Situs dan API berada di port yang berbeda. Mungkin ada cara yang lebih baik untuk melakukan ini ... tetapi berhasil.

<?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>

Ini mungkin sudah tua. Tapi, itu hanya terjadi dalam sudut, jenis konten untuk permintaan dan tanggapan berbeda dalam kode saya. Jadi, periksa tajuk untuk,

 let headers = new Headers({
        'Content-Type': 'application/json',
        **Accept**: 'application/json'
    });

dalam Bereaksi aksioma

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)
    });
  },

Setelah menghabiskan banyak waktu dengan ini, saya menemukan bahwa dalam kasus saya masalahnya adalah memiliki "beranda" yang didefinisikan pada file package.json saya membuat aplikasi saya tidak berfungsi pada firebase (kesalahan 'token' yang sama). Saya membuat aplikasi reaksi saya menggunakan aplikasi create-react-app, kemudian saya menggunakan panduan firebase pada file READ.me untuk menyebar ke halaman github, menyadari bahwa saya harus melakukan pekerjaan ekstra agar router dapat bekerja, dan beralih ke firebase. panduan github telah menambahkan kunci beranda pada package.json dan menyebabkan masalah penyebaran.

Protip: Menguji json di server Node.js lokal? Pastikan Anda belum memiliki sesuatu yang merutekan ke jalur itu

'/:url(app|assets|stuff|etc)';

Pada tingkat umum kesalahan ini terjadi ketika objek JSON diuraikan yang memiliki kesalahan sintaksis di dalamnya. Pikirkan sesuatu seperti ini, di mana properti pesan berisi tanda kutip ganda yang tidak terhapuskan:

{
    "data": [{
        "code": "1",
        "message": "This message has "unescaped" quotes, which is a JSON syntax error."
    }]
}

Jika Anda memiliki JSON di aplikasi Anda di suatu tempat maka ada baiknya menjalankannya melalui JSONLint untuk memverifikasi bahwa ia tidak memiliki kesalahan sintaksis. Biasanya ini tidak terjadi meskipun dalam pengalaman saya, biasanya JSON dikembalikan dari API yang menjadi penyebabnya.

Ketika permintaan XHR dibuat ke API HTTP yang mengembalikan respons dengan a Content-Type:application/json; charset=UTF-8 tajuk yang berisi JSON tidak valid di badan respons Anda akan melihat kesalahan ini.

Jika pengontrol API sisi-server tidak benar menangani kesalahan sintaks, dan sedang dicetak sebagai bagian dari respons, itu akan merusak struktur JSON yang dikembalikan. Contoh yang baik dari hal ini adalah respons API yang berisi Peringatan atau Pemberitahuan PHP di badan respons:

<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% dari waktu ini adalah sumber masalah bagi saya, dan meskipun agak dibahas di sini dalam tanggapan lain saya tidak merasa itu dijelaskan dengan jelas. Semoga ini bisa membantu, jika Anda mencari cara praktis untuk melacak respons API mana yang mengandung kesalahan sintaks JSON, saya telah menulis modul Angular untuk itu .

Berikut modulnya:

/**
 * 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' );
    } ] );

Rincian lebih lanjut dapat ditemukan di artikel blog yang dirujuk di atas, saya belum memposting semua yang ditemukan di sini karena mungkin tidak semua relevan.

Bagi saya, ini terjadi ketika salah satu properti pada objek yang saya kembali sebagai JSON melemparkan pengecualian.

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;
    }
}

Menambahkan cek nol, perbaiki untuk saya:

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;
    }
}

hanya sesuatu yang mendasar untuk diperiksa, pastikan Anda tidak memiliki komentar di file json

//comments here will not be parsed and throw error

Hanya untuk menambah jawaban, itu juga terjadi ketika respons API Anda termasuk

<?php{username: 'Some'}

yang bisa menjadi kasus ketika backend Anda menggunakan PHP.

Dalam python Anda dapat menggunakan json.Dump (str) sebelum mengirim hasil ke templat html. dengan string perintah ini dikonversi ke format json yang benar dan kirim ke templat html. Setelah mengirim hasil ini ke JSON.parse (hasil), ini adalah jawaban yang benar dan Anda dapat menggunakan ini.

Untuk beberapa orang, ini dapat membantu kalian: Saya memiliki pengalaman yang sama dengan Wordpress REST API. Saya bahkan menggunakan tukang pos untuk memeriksa apakah saya memiliki rute atau titik akhir yang benar. Saya kemudian mengetahui bahwa saya tidak sengaja memasukkan "echo" ke dalam skrip saya - kait:

Debug & periksa konsol Anda

Penyebab kesalahan

Jadi pada dasarnya, ini berarti bahwa saya mencetak nilai yang bukan JSON yang dicampur dengan skrip yang menyebabkan kesalahan AJAX - "SyntaxError: Token tak terduga di JSON di posisi 0"

Ini mungkin disebabkan karena kode javascript Anda melihat beberapa respons json dan Anda menerima sesuatu yang lain seperti teks.

Saya mengalami masalah yang sama. Saya menggunakan server node.js sederhana untuk mengirim respons ke klien yang dibuat dalam Angular 7. Awalnya saya mengirim response.end ('Halo dunia dari server nodejs'); ke klien tetapi entah bagaimana sudut tidak dapat menguraikannya.

Mereka yang menggunakan create-react-appdan mencoba mengambil file json lokal.

Seperti dalam create-react-app, webpack-dev-serverdigunakan untuk menangani permintaan dan untuk setiap permintaan itu melayani index.html. Jadi, Anda mendapatkan

SyntaxError: Token tak terduga <dalam JSON di posisi 0.

Untuk mengatasi ini, Anda perlu mengeluarkan aplikasi dan memodifikasi webpack-dev-serverfile konfigurasi.

Anda dapat mengikuti langkah-langkah dari sini .

Dalam kasus saya (backend), saya menggunakan res.send (token);

Semuanya diperbaiki ketika saya mengubah ke kirim ulang (data);

Anda mungkin ingin memeriksa ini jika semuanya berfungsi dan memposting sebagaimana dimaksud, tetapi kesalahan terus muncul di front-end Anda.

Kemungkinan untuk kesalahan ini sangat besar.

Dalam kasus saya, saya menemukan bahwa masalah tersebut menambah masalah yang homepagediajukan package.json.

Layak diperiksa: dalam package.jsonperubahan:

homepage: "www.example.com"

untuk

hompage: ""   

Singkatnya, jika Anda mendapatkan kesalahan ini atau kesalahan serupa, itu berarti hanya satu hal. Yaitu, di suatu tempat di basis kode kami, kami mengharapkan format JSON yang valid untuk diproses dan kami tidak mendapatkannya. Sebagai contoh:

var string = "some string";
JSON.parse(string)

Akan melempar kesalahan, mengatakan

Uncaught SyntaxError: Token tak terduga di JSON di posisi 0

Karena, karakter pertama di stringis s& itu bukan JSON yang valid sekarang. Ini bisa melempar kesalahan di antara juga. Suka:

var invalidJSON= '{"foo" : "bar", "missedquotehere : "value" }';
JSON.parse(invalidJSON)

Akan melempar kesalahan:

VM598:1 Uncaught SyntaxError: Unexpected token v in JSON at position 36

karena kami sengaja melewatkan kutipan di string JSON invalidJSONdi posisi 36.

Dan jika Anda memperbaikinya:

var validJSON= '{"foo" : "bar", "missedquotehere : "value" }';
JSON.parse(validJSON)

akan memberi Anda objek di JSON.

Sekarang, kesalahan ini dapat dilemparkan ke sembarang tempat & di kerangka / pustaka apa pun. Sebagian besar waktu Anda mungkin membaca respons jaringan yang bukan JSON valid. Jadi langkah-langkah debug masalah ini bisa seperti:

1. curl atau tekan API yang sebenarnya Anda panggil.
2. Log / Salin respons dan coba parsing dengannya JSON.parse. Jika Anda mendapatkan kesalahan, perbaiki.
3. Jika tidak, pastikan kode Anda tidak bermutasi / mengubah respons asli.

Jika ada orang lain yang menggunakan fetch dari dokumentasi "Menggunakan Fetch" di Web API di Mozilla: (Ini benar-benar berguna: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch )

  fetch(api_url + '/database', {
    method: 'POST', // or 'PUT'
    headers: {
     'Content-Type': 'application/json'
    },
    body: qrdata //notice that it is not qr but qrdata
  })
  .then((response) => response.json())
  .then((data) => {
    console.log('Success:', data);
  })  
  .catch((error) => {
  console.error('Error:', error);  });

Ini ada di dalam fungsi:

async function postQRData(qr) {

  let qrdata = qr; //this was added to fix it!
  //then fetch was here
}

Saya menggunakan fungsi qryang saya yakini sebagai objek karena qrterlihat seperti ini: {"name": "Jade", "lname": "Bet", "pet":"cat"}tetapi saya terus mendapatkan kesalahan sintaksis. Ketika saya menugaskannya untuk sesuatu yang lain: let qrdata = qr;itu berhasil.

Token tak terduga <dalam JSON di posisi 0

Solusi sederhana untuk kesalahan ini adalah menulis komentar dalam styles.lessfile.