it-roy-ru.com

«SyntaxError: неожиданный токен <в JSON в позиции 0»

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

Feed.js: 94 undefined "parsererror" "SyntaxError: Неожиданный токен <в JSON в позиции 0

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

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

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

В 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 постоянно пытается подключиться к серверу и в конечном итоге приводит к сбою браузера.

Правка:

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

Правка 2:

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

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

136
Cameron Sima

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

111
George Bailey

Вы получаете HTML (или XML) обратно с сервера, но dataType: json сообщает jQuery для анализа как JSON. Проверьте вкладку «Сеть» в инструментах разработчика Chrome, чтобы увидеть содержание ответа сервера.

33
nil

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

9
Andrew Shenstone

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

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

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

5
VictorL

В моем случае я запустил этот работающий веб-пакет, и оказалось, что где-то в локальном каталоге node_modules какая-то ошибка.

rm -rf node_modules
npm install

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

5
Kev

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

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

Я изменил это на:

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

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

3
Versatile

У меня было то же сообщение об ошибке после учебника. Наша проблема, кажется, 'url: this.props.url' в вызове ajax. В React.DOM, когда вы создаете свой элемент, мой выглядит следующим образом.

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

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

Я надеюсь, что это помогает.

1
Timea

Убедитесь, что ответ в формате JSON, иначе выдает эту ошибку.

1
Tomas Grecio Ramirez

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

1
Deke

В моем случае для сайта Angular 2/4, размещенного в Azure, мой API-вызов mySite/api/... был перенаправлен из-за проблем с маршрутизацией mySite. Таким образом, он возвращал HTML с перенаправленной страницы вместо API JSON. Я добавил исключение в файл web.config для пути 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>
1
Dave

Те, кто использует create-react-app и пытается извлечь локальные файлы json.

Как и в create-react-app, webpack-dev-server используется для обработки запроса, и для каждого запроса он обслуживает index.html. Итак, вы получаете

SyntaxError: Неожиданный токен <в JSON в позиции 0.

Чтобы решить эту проблему, вам нужно извлечь приложение и изменить файл конфигурации webpack-dev-server.

Вы можете следовать инструкциям из здесь .

1
an0nym0us

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

1
sriram veeraghanta

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

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

в реакции реагирует

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

Это может произойти из-за того, что ваш javascript-код просматривает какой-то ответ json, и вы получили что-то еще, например текст.

0
R Karwalkar

Для меня это произошло, когда одно из свойств объекта, который я возвращал как 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;
    }
}
0
Window

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

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

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

Когда XHR-запрос сделан к HTTP API, который возвращает ответ с заголовком 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' );
    } ] );

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

0
Kevin Leary

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

Отладка и проверка вашей консоли

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

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

0
Ray Macz

просто что-то базовое, чтобы проверить, убедитесь, что у вас нет ничего закомментировано в файле JSON

//comments here will not be parsed and throw error
0
Akin Hwan

У меня была такая же проблема. Я использую простой сервер node.js для отправки ответа клиенту, выполненному в Angular 7. Изначально я отправлял response.end («Hello world from nodejs server»); Клиенту, но каким-то образом angular не смог его проанализировать ,.

0
Maddy

Потратив много времени на это, я обнаружил, что в моем случае проблема была в том, что в моем файле package.json была определена «домашняя страница», из-за которой мое приложение не работало на firebase (та же самая ошибка «токена») . Я создал мое приложение реагирования с использованием create-реагировать-приложение, затем я использовал руководство по firebase в файле READ.me для развертывания на страницах github, понял, что для работы маршрутизатора мне нужно было выполнить дополнительную работу, и переключился на firebase. Руководство github добавило ключ homepage в package.json и вызвало проблему с развертыванием.

0
Alejandro B.

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

0
user2713125

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

<?php{username: 'Some'}

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

0
Tushar Sharma

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

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