"SyntaxError: неожиданный токен

в компоненте приложения React, который обрабатывает каналы контента, подобные Facebook, я сталкиваюсь с ошибкой:

кормить.js: 94 неопределенный "parsererror "" SyntaxError: неожиданный токен

я столкнулся с аналогичной ошибкой, которая оказалась опечаткой в HTML в функции рендеринга, но здесь это не так.

более запутанно, я откатил код назад к более ранней, известной рабочей версии, и я все еще получаю ошибку.

кормить.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 с сервера, я попытался начать с пустой БД, но ошибка сохраняется. Ошибка, по-видимому, вызывается в бесконечном цикле, предположительно, поскольку React непрерывно пытается подключиться к сервер и в конечном итоге сбой браузера.

EDIT:

Я проверил ответ сервера с помощью инструментов Chrome dev и клиента Chrome REST, и данные кажутся правильными JSON.

EDIT 2:

похоже, что, хотя предполагаемая конечная точка API действительно возвращает правильные данные и формат JSON, React-это опрос http://localhost:3000/?_=1463499798727 вместо ожидаемого http://localhost:3001/api/threads.

я запускаю сервер горячей перезагрузки webpack на порту 3000 с помощью express приложение работает на порту 3001 вернуть данные. Что расстраивает здесь, так это то, что это работало правильно в последний раз, когда я работал над ним, и не могу найти то, что я мог бы изменить, чтобы сломать его.

20 ответов


текст сообщения об ошибке соответствует тому, что вы получаете от Google Chrome при запуске JSON.parse('<...'). Я знаю, вы сказали, что сервер устанавливает Content-Type:application/json, но я считаю, ответ тело на самом деле 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 dev tools, чтобы увидеть содержимое ответа сервера.


это оказалось проблемой разрешений для меня. Я пытался получить доступ к url-адресу, для которого у меня не было авторизации в cancan, поэтому url-адрес был переключен на users/sign_in. перенаправленный url-адрес отвечает html, а не json. Первый символ в html-ответе -<.


Я испытал эту ошибку "SyntaxError: неожиданный токен m в JSON в позиции", где токен " m " может быть любым другим символом.

оказалось, что я пропустил одну из двойных кавычек в объекте JSON, когда я использовал RESTconsole для теста DB, как {"name: "math"}, правильным должен быть {"name":"math"}

Мне потребовалось много усилий, чтобы понять эту неуклюжую ошибку. Боюсь другие аналогичные бездельники.


I в моем случае ошибка была результатом того, что я не назначил возвращаемое значение переменной. Следующее сообщение об ошибке:

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

Я изменил его на:

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

без переменной JSON не может правильно форматировать данные.


в моем случае я получал этот запущенный webpack, и это оказалось некоторой коррупцией где-то в локальном каталоге node_modules.

rm -rf node_modules
npm install

...этого было достаточно, чтобы он снова заработал.


моя проблема заключалась в том, что я получал данные обратно в string который не был в правильном формате JSON,который я тогда пытался разобрать. simple example: JSON.parse('{hello there}') даст ошибку в h. В моем случае url обратного вызова возвращал ненужный символ перед объектами:employee_names([{"name":.... и получал ошибку при e в 0. У моего URL обратного вызова была проблема, которая при исправлении возвращала только объекты.


эта ошибка возникает при определении ответа как application/json и вы получаете HTML в качестве ответа. В принципе, это произошло, когда вы пишете сценарий на стороне сервера для определенного url с ответом JSON, но формат ошибки находится в HTML.


в моем случае для размещенного в Azure углового сайта 2/4 мой API-вызов mySite/api/... перенаправление из-за проблем маршрутизации mySite. Таким образом, он возвращал HTML с перенаправленной страницы вместо api JSON. Я добавил исключение в интернете.файл конфигурации для пути api.

Я не получаю эту ошибку при разработке локально, потому что сайт и 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>

Это может быть старый. Но, это просто произошло в angular, тип контента для запроса и ответа был другим в моем коде. Итак, проверьте заголовки для,

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

у меня было такое же сообщение об ошибке после учебник. Наша проблема, похоже, " url: this.реквизит.URL-адрес в AJAX-вызов. В React.Когда вы создаете свой элемент, мой выглядит так.

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

Ну, в этом поле комментариев нет url-адреса в реквизите, только данные. Когда я поменялся url: this.props.url ->url: this.props.data, он сделал правильный вызов серверу, и я получил ожидаемые данные.

надеюсь, это поможет.


проведя много времени с этим, я узнал, что в моем случае проблема заключалась в том, что "домашняя страница" определена на моем пакете.файл json сделал мое приложение не работать на firebase (та же ошибка "токена"). Я создал приложение react с помощью create-react-app, затем я использовал руководство firebase для чтения.файл me для развертывания на страницах github, понял, что мне нужно сделать дополнительную работу для работы маршрутизатора, и переключился на firebase. руководство github добавило ключ домашней страницы в пакет.json и вызвал развертывание вопрос.


Protip: тестирование json на локальном узле.сервер js? Убедитесь, что у вас еще нет маршрутизации к этому пути

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

на общем уровне эта ошибка возникает при анализе объекта JSON с синтаксическими ошибками. Думать о чем-то подобном, где свойство message содержит экранированные двойные кавычки:

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

если у вас есть JSON в вашем приложении где-то, то хорошо запустить его через JSONLint чтобы убедиться, что у него нет синтаксической ошибки. Обычно это не так, хотя по моему опыту, обычно JSON возвращается из API, который является виновный.

когда запрос XHR сделан к API HTTP, который возвращает ответ с Content-Type:application/json; charset=UTF-8 заголовок, который содержит недопустимый JSON в теле ответа, вы увидите эту ошибку.

если контроллер API на стороне сервера неправильно обрабатывает синтаксическую ошибку и распечатывается как часть ответа, это нарушит структуру возвращаемого JSON. Хорошим примером этого может быть ответ API, содержащий предупреждение или уведомление PHP в ответе тело:

<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, которую я написал угловой модуль для этого.

вот модуль:

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

более подробную информацию можно найти в статье блога, упомянутой выше, I не разместили все, что нашли здесь, поскольку это, вероятно, не все актуально.


для меня это произошло, когда одно из свойств объекта, который я возвращал, как JSON бросил исключение.

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

добавление нулевой проверки, исправлено для меня:

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

//comments here will not be parsed and throw error

просто чтобы добавить к ответам, это также происходит, когда ваш ответ API включает

<?php{username: 'Some'}

это может быть случай, когда ваш бэкэнд использует PHP.


в python вы можете использовать json.Дамп (str) перед отправкой результата в html-шаблон. с помощью этой командной строки преобразовать в правильный формат json и отправить в html шаблон. После отправки этого результата в JSON.разбор (результат), это правильный ответ, и вы можете использовать это.


для некоторых, это может помочь вам ребята: У меня был аналогичный опыт работы с API REST Wordpress. Я даже использовал Postman для проверки правильности маршрутов или конечной точки. Позже я узнал, что случайно поместил " эхо " внутри своих скриптовых крючков:

Debug & проверьте консоль

причина ошибки

таким образом, в основном это означает, что я напечатал значение, которое не является JSON, смешанным со скриптом, который вызывает ошибку AJAX - "SyntaxError: неожиданный токен r в JSON в позиции 0"


неожиданный токен

простое решение этой ошибки-написать комментарий в .