«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 и клиента Chrome REST, и данные оказались правильным JSON.

РЕДАКТИРОВАТЬ 2:

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

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

Формулировка сообщения об ошибке соответствует тому, что вы получаете от 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, чтобы увидеть содержимое ответа сервера.

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

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

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

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

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

rm -rf node_modules
npm install

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

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

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

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

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

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

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

Я столкнулся с той же проблемой,
я удалил dataType: 'json' из метода $ .ajax

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

Короче говоря, если вы получаете эту ошибку или похожую ошибку, это означает только одно. То есть где-то в нашей кодовой базе мы ожидали обработки допустимого формата JSON, но не получили его. Например:

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

Выдает ошибку, говоря

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

Так, первый символ stringявляется sи это не является допустимым JSON в настоящее время. Это также может вызвать ошибку между ними. подобно:

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

Выдает ошибку:

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

потому что мы намеренно пропустили кавычку в строке JSON invalidJSONв позиции 36.

И если вы это исправите:

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

предоставит вам объект в формате JSON.

Теперь эту ошибку можно выбросить в любом месте и в любом фреймворке / библиотеке. В большинстве случаев вы можете читать сетевой ответ, который не является допустимым JSON. Итак, шаги по устранению этой проблемы могут быть такими:

1. curl или нажмите на фактический API, который вы вызываете.
2. Зарегистрируйте / скопируйте ответ и попробуйте его разобрать с помощью JSON.parse. Если вы получаете ошибку, исправьте ее.
3. Если нет, убедитесь, что ваш код не мутирует / не изменяет исходный ответ.

У меня было такое же сообщение об ошибке после урока. Наша проблема, похоже, связана с 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 , он сделал правильный вызов серверу, и я получил ожидаемые данные.

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

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

В моем случае для сайта 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>

Это могло быть старым. Но это произошло только в 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)
    });
  },

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

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

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

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

{
    "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. Я написал для этого модуль Angular .

Вот модуль:

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

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

Для меня это произошло, когда одно из свойств объекта, которое я возвращал как 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.Dump (str) перед отправкой результата в шаблон html. с помощью этой командной строки преобразовать в правильный формат json и отправить в шаблон html. После отправки этого результата в JSON.parse (результат) это правильный ответ, и вы можете его использовать.

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

Отладьте и проверьте свою консоль

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

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

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

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

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

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

Вы можете выполнить шаги отсюда .

В моем случае (backend) я использовал res.send (token);

Все было исправлено, когда я перешел на res.send (data);

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

Возможности этой ошибки огромны.

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

Стоит проверить: в package.jsonсдаче:

homepage: "www.example.com"

к

hompage: ""   

В моем случае была проблема с «Bearer» в заголовке, в идеале это должно быть «Bearer» (пробел после символа конца), но в моем случае это был «Bearer», после символа не было пробела. Надеюсь, это кому-то поможет!

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

Вы получаете html-файл вместо json.

Файлы Html начинаются с <!DOCTYPE html>.

Я "добился" этой ошибки, забыв https://в моем fetchметоде:

fetch(`/api.github.com/users/${login}`)
    .then(response => response.json())
    .then(setData);

Я подтвердил свою догадку:

Я зарегистрировал ответ как текст вместо JSON.

fetch(`/api.github.com/users/${login}`)
    .then(response => response.text())
    .then(text => console.log(text))
    .then(setData);

Ага, HTML-файл.

Решение:

Я исправил ошибку, добавив обратно https://в свой fetchметод.

fetch(`https://api.github.com/users/${login}`)
    .then(response => response.json())
    .then(setData)
    .catch(error => (console.log(error)));

Для будущих гуглеров:

Это сообщение будет сгенерировано при сбое серверной функции.

Или если серверная функция даже не существует (например, опечатка в имени функции) .

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

Проверьте эту строку GET еще раз. Мой был:

'/theRouteIWant&someVar=Some value to send'

должно быть

'/theRouteIWant?someVar=Some value to send'
               ^

CrAsH!       (... незримо , на сервере ...)

Node / Express отправляет невероятно полезное сообщение:
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

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

Если кто-то еще использует выборку из документации «Использование выборки» для веб-API в Mozilla: (Это действительно полезно: 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);  });

Это было внутри функции:

async function postQRData(qr) {

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

Я передавал в свою функцию qrто, что считал объектом, потому что qrвыглядел так: {"name": "Jade", "lname": "Bet", "pet":"cat"}но я продолжал получать синтаксические ошибки. Когда я назначил это чему-то другому: let qrdata = qr;это сработало.