“SyntaxError: token inesperado <no JSON na posição 0”

Em um componente do aplicativo React que lida com feeds de conteúdo do tipo Facebook, estou com um erro:

Feed.js: 94 indefinido "parsererror" "SyntaxError: token inesperado <no JSON na posição 0

Corri para um erro semelhante que acabou por ser um erro de digitação no HTML dentro da função de renderização, mas isso não parece ser o caso aqui.

De maneira mais confusa, revirei o código para uma versão anterior conhecida e ainda estou recebendo o erro.

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

Nas ferramentas de desenvolvedor do Chrome, o erro parece vir desta função:

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

com a linha console.error(this.props.url, status, err.toString()sublinhada.

Como parece que o erro parece ter algo a ver com a retirada de dados JSON do servidor, tentei iniciar em um banco de dados em branco, mas o erro persiste. O erro parece ser chamado em um loop infinito, presumivelmente, pois o React tenta continuamente se conectar ao servidor e, eventualmente, trava o navegador.

EDITAR:

Verifiquei a resposta do servidor com as ferramentas de desenvolvimento do Chrome e o cliente REST do Chrome, e os dados parecem ser JSON adequados.

EDIT 2:

Parece que, embora o terminal da API pretendido esteja realmente retornando os dados e o formato JSON corretos, o React está pesquisando em http://localhost:3000/?_=1463499798727vez do esperado http://localhost:3001/api/threads.

Estou executando um servidor de recarga a quente do webpack na porta 3000 com o aplicativo expresso em execução na porta 3001 para retornar os dados de back-end. O que é frustrante aqui é que isso funcionou corretamente na última vez em que trabalhei nele e não consigo encontrar o que poderia ter mudado para quebrá-lo.

O texto da mensagem de erro corresponde ao que você recebe do Google Chrome quando executa JSON.parse('<...'). Sei que você disse que o servidor está configurando Content-Type:application/json, mas sou levado a acreditar que o corpo da resposta é realmente HTML.

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

com a linha console.error(this.props.url, status, err.toString())sublinhada.

O errfoi realmente jogado dentro jQuerye passado para você como uma variávelerr . A razão pela qual a linha está sublinhada é simplesmente porque é onde você a está registrando.

Eu sugeriria que você adicionasse ao seu log. Examinando as propriedades reais xhr(XMLHttpRequest) para saber mais sobre a resposta. Tente adicionar console.warn(xhr.responseText)e você provavelmente verá o HTML que está sendo recebido.

Você está recebendo HTML (ou XML) de volta do servidor, mas dataType: jsonestá dizendo ao jQuery para analisar como JSON. Verifique a guia "Rede" nas ferramentas de desenvolvimento do Chrome para ver o conteúdo da resposta do servidor.

Isso acabou sendo um problema de permissões para mim. Eu estava tentando acessar um URL para o qual não tinha autorização com cancan, então o URL foi alterado para users/sign_in. o URL redirecionado responde ao html, não ao json. O primeiro caractere em uma resposta html é <.

Ocorreu o erro "SyntaxError: token inesperado m no JSON na posição", onde o token 'm' pode ser qualquer outro caractere.

Aconteceu que eu perdi uma das aspas duplas no objeto JSON quando estava usando o RESTconsole para teste de banco de dados, como {"name:" math "}, a correta deve ser {" name ":" math "}

Demorei muito esforço para descobrir esse erro desajeitado. Receio que outros encontrem chatices semelhantes.

No meu caso, eu estava obtendo este webpack em execução, e acabou havendo alguma corrupção em algum lugar no diretório node_modules local.

rm -rf node_modules
npm install

... foi o suficiente para fazê-lo funcionar novamente.

No meu caso, o erro foi resultado de não atribuir meu valor de retorno a uma variável. O seguinte causou a mensagem de erro:

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

Eu mudei para:

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

Sem a variável, o JSON não pode formatar corretamente os dados.

Este erro ocorre quando você define a resposta como application/jsone está obtendo um HTML como resposta. Basicamente, isso aconteceu quando você estava escrevendo um script do lado do servidor para um URL específico com uma resposta JSON, mas o formato do erro está em HTML.

Certifique-se de que a resposta esteja no formato JSON, caso contrário, dispara esse erro.

Eu estava enfrentando o mesmo problema,
removi o dataType: 'json' do método $ .ajax

Eu tive a mesma mensagem de erro após um tutorial. Nosso problema parece ser 'url: this.props.url' na chamada ajax. No React.DOM, quando você está criando seu elemento, o meu se parece com isso.

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

Bem, este CommentBox não tem um URL em seus props, apenas dados. Quando mudei url: this.props.url-> url: this.props.data, ele fez a chamada certa para o servidor e recuperei os dados esperados.

Espero que ajude.

Meu problema era que eu estava recebendo os dados de volta em um formato stringque não estava no formato JSON adequado, que eu estava tentando analisar. simple example: JSON.parse('{hello there}')dará um erro em h. No meu caso, o URL de retorno de chamada estava retornando um caracter desnecessário antes dos objetos: employee_names([{"name":....e estava recebendo erro de e em 0. Meu próprio URL de retorno de chamada tinha um problema que, quando corrigido, retornava apenas objetos.

No meu caso, para um site Angular 2/4 hospedado no Azure, minha chamada de API para mySite / api / ... foi redirecionada devido a problemas de roteamento do mySite. Portanto, ele retornava o HTML da página redirecionada em vez do JSON da API. Eu adicionei uma exclusão em um arquivo web.config para o caminho da API.

Eu não estava recebendo esse erro ao desenvolver localmente porque o Site e a API estavam em portas diferentes. Provavelmente existe uma maneira melhor de fazer isso ... mas funcionou.

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

Isso pode ser antigo. Mas, apenas ocorreu em angular, o tipo de conteúdo para solicitação e resposta era diferente no meu código. Portanto, verifique os cabeçalhos,

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

em Axios de reação

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

Depois de passar muito tempo com isso, descobri que, no meu caso, o problema era ter "página inicial" definida no meu arquivo package.json, fazendo com que meu aplicativo não funcionasse na firebase (mesmo erro de 'token'). Criei meu aplicativo de reação usando create-react-app, depois usei o guia do firebase no arquivo READ.me para implantar nas páginas do github, percebi que tinha que fazer um trabalho extra para o roteador funcionar e mudei para o firebase. O guia github adicionou a chave da página inicial no package.json e causou o problema de implantação.

Protip: testando json em um servidor Node.js. local? Verifique se você ainda não possui um roteamento para esse caminho

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

Em geral, esse erro ocorre quando um objeto JSON é analisado com erros de sintaxe. Pense em algo assim, onde a propriedade da mensagem contém aspas duplas sem escape:

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

Se você tiver o JSON em seu aplicativo em algum lugar, é bom executá-lo no JSONLint para verificar se não há um erro de sintaxe. Normalmente, esse não é o caso, embora, na minha experiência, geralmente o JSON retorne de uma API que seja a culpada.

Quando uma solicitação XHR é feita para uma API HTTP que retorna uma resposta com um Content-Type:application/json; charset=UTF-8 cabeçalho que contém JSON inválido no corpo da resposta, você verá esse erro.

Se um controlador de API do servidor estiver lidando incorretamente com um erro de sintaxe e estiver sendo impresso como parte da resposta, isso quebrará a estrutura do JSON retornado. Um bom exemplo disso seria uma resposta da API contendo um aviso ou aviso do PHP no corpo da resposta:

<b>Notice</b>:  Undefined variable: something in <b>/path/to/some-api-controller.php</b> on line <b>99</b><br />
{
    "success": false,
    "data": [{ ... }]
}

Em 95% do tempo, essa é a fonte do problema para mim e, embora seja um pouco abordado aqui nas outras respostas, não achei que fosse descrito claramente. Espero que isso ajude, se você estiver procurando uma maneira prática de rastrear qual resposta da API contém um erro de sintaxe JSON que escrevi para o módulo Angular .

Aqui está o módulo:

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

Mais detalhes podem ser encontrados no artigo do blog mencionado acima, não publiquei tudo o que foi encontrado aqui, pois provavelmente nem tudo é relevante.

Para mim, isso aconteceu quando uma das propriedades do objeto que eu estava retornando como JSON lançou uma exceção.

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

Adicionando uma verificação nula, foi corrigida para mim:

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

apenas algo básico para verificar, verifique se você não tem nada comentado no arquivo json

//comments here will not be parsed and throw error

Apenas para adicionar às respostas, isso também acontece quando sua resposta da API inclui

<?php{username: 'Some'}

o que pode acontecer quando seu back-end está usando PHP.

Em python, você pode usar json.Dump (str) antes de enviar o resultado para o modelo html. com esta sequência de comandos, converta para corrigir o formato json e envie para o modelo html. Depois de enviar este resultado para JSON.parse (resultado), esta é a resposta correta e você pode usá-lo.

Para alguns, isso pode ajudar vocês: eu tive uma experiência semelhante com a API REST do Wordpress. Até usei o Postman para verificar se eu tinha as rotas ou o ponto final corretos. Mais tarde, descobri que acidentalmente coloquei um "eco" dentro do meu script - hooks:

Depure e verifique seu console

Causa do erro

Então, basicamente, isso significa que imprimi um valor que não é JSON que é misturado com o script que causa o erro AJAX - "SyntaxError: token inesperado r em JSON na posição 0"

Isso pode causar, porque seu código javascript está observando alguma resposta json e você recebeu outra coisa como texto.

Eu estava tendo o mesmo problema. Estou usando um servidor node.js simples para enviar resposta a um cliente feito no Angular 7. Inicialmente, estava enviando response.end ('Olá mundo do servidor nodejs'); para o cliente, mas de alguma forma angular não foi possível analisá-lo.

Aqueles que estão usando create-react-appe tentando buscar arquivos json locais.

Como em create-react-app, webpack-dev-serveré usado para manipular a solicitação e para cada solicitação que ele atende index.html. Então você está recebendo

SyntaxError: token inesperado <no JSON na posição 0.

Para resolver isso, você precisa ejetar o aplicativo e modificar o webpack-dev-serverarquivo de configuração.

Você pode seguir as etapas aqui .

No meu caso (back-end), eu estava usando res.send (token);

Tudo foi corrigido quando mudei para res.send (data);

Convém verificar isso se tudo estiver funcionando e postando como pretendido, mas o erro continua aparecendo no seu front-end.

As possibilidades para esse erro são impressionantes.

No meu caso, descobri que o problema estava adicionando o homepagearquivado empackage.json causou o problema.

Vale a pena conferir: in package.jsonchange:

homepage: "www.example.com"

para

hompage: ""   

Em poucas palavras, se você está recebendo esse erro ou erro semelhante, isso significa apenas uma coisa. Ou seja, em algum lugar da nossa base de código estávamos esperando um formato JSON válido para processar e não conseguimos um. Por exemplo:

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

Irá gerar um erro, dizendo

SyntaxError não capturado: token inesperado s no JSON na posição 0

Porque, o primeiro caractere stringé s& não é um JSON válido agora. Isso também pode gerar erros no meio. gostar:

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

Irá gerar erro:

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

porque intencionalmente perdemos uma cotação na string JSON invalidJSONna posição 36.

E se você consertar isso:

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

lhe dará um objeto em JSON.

Agora, esse erro pode ser gerado em qualquer lugar e em qualquer estrutura / biblioteca. Na maioria das vezes, você pode estar lendo uma resposta de rede que não é JSON válida. Portanto, as etapas de depuração desse problema podem ser como:

1. curl ou clique na API que você está chamando.
2. Registre / copie a resposta e tente analisá-la JSON.parse. Se você estiver recebendo um erro, corrija-o.
3. Caso contrário, verifique se o seu código não está mudando / alterando a resposta original.

Se alguém mais estiver usando a busca na documentação "Usando a busca" nas APIs da Web no Mozilla: (Isso é realmente útil: 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);  });

Isso estava dentro da função:

async function postQRData(qr) {

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

Eu estava passando para a minha função o qrque eu acreditava ser um objeto, porque qrera assim: {"name": "Jade", "lname": "Bet", "pet":"cat"}mas eu continuava recebendo erros de sintaxe. Quando eu o designei para outra coisa: let qrdata = qr;funcionou.

Token inesperado <no JSON na posição 0

Uma solução simples para esse erro é escrever um comentário no styles.lessarquivo.