"SyntaxError : JSON의 0 위치에 예기치 않은 토큰 <"

"SyntaxError : JSON의 0 위치에 예기치 않은 토큰 <"

---

Facebook과 같은 콘텐츠 피드를 처리하는 React 앱 구성 요소에서 오류가 발생했습니다.

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 데이터를 가져 오는 것과 관련이있는 것처럼 보이므로 빈 DB에서 시작했지만 오류가 지속됩니다. React가 지속적으로 서버에 연결하려고 시도하고 결국 브라우저와 충돌하기 때문에 오류가 무한 루프에서 호출 된 것 같습니다.

편집하다:

Chrome 개발 도구 및 Chrome REST 클라이언트를 사용하여 서버 응답을 확인했으며 데이터가 올바른 JSON 인 것으로 보입니다.

편집 2 :

의도 한 API 엔드 포인트가 실제로 올바른 JSON 데이터 및 형식을 리턴하지만 React가 http://localhost:3000/?_=1463499798727예상 된 것 대신 폴링하는 것 같습니다 http://localhost:3001/api/threads.

백엔드 데이터를 반환하기 위해 포트 3001에서 실행되는 express 앱으로 포트 3000에서 웹팩 핫 리로드 서버를 실행하고 있습니다. 여기서 실망스러운 것은 이것이 내가 마지막으로 작업했을 때 올바르게 작동했으며 깨뜨릴 수있는 것을 찾을 수 없다는 것입니다.

---

오류 메시지의 문구는를 실행할 때 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: jsonjQuery가 JSON으로 구문 분석하도록 지시합니다. 서버의 응답 내용을 보려면 Chrome 개발 도구에서 "네트워크"탭을 확인하십시오.

---

이것은 결국 권한 문제가되었습니다. cancan으로 인증하지 않은 URL에 액세스하려고했기 때문에 URL이로 변경되었습니다 users/sign_in. 리디렉션 된 URL은 json이 아닌 html에 응답합니다. html 응답의 첫 번째 문자는 <입니다.

---

토큰 'm'이 다른 문자 일 수있는 "SyntaxError : JSON의 예기치 않은 토큰 m 위치"오류가 발생했습니다.

{ "name :"math "}와 같이 DB 테스트에 RESTconsole을 사용할 때 JSON 객체에서 큰 따옴표 중 하나를 놓쳤습니다. {"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/jsonHTML을 응답으로받을 때 발생합니다 . 기본적으로 이것은 JSON 응답으로 특정 URL에 대한 서버 측 스크립트를 작성할 때 발생하지만 오류 형식은 HTML입니다.

---

응답이 JSON 형식인지 확인하십시오. 그렇지 않으면이 오류가 발생합니다.

---

튜토리얼에 따라 동일한 오류 메시지가 나타납니다. 우리의 문제는 아약스 호출에서 'url : this.props.url'인 것으로 보입니다. 요소를 만들 때 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":....0에서 e에서 오류가 발생했습니다. 콜백 URL 자체에는 수정시 객체 만 반환하는 문제가 있습니다.

---

필자의 경우 Azure 호스팅 Angular 2/4 사이트의 경우 mySite / api / ...에 대한 API 호출이 mySite 라우팅 문제로 인해 리디렉션되었습니다. 따라서 API JSON 대신 리디렉션 된 페이지에서 HTML을 반환했습니다. api 경로에 대한 web.config 파일에 제외를 추가했습니다.

사이트와 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>

---

이것은 오래되었을 수 있습니다. 그러나 방금 각도에서 발생했으며 요청 및 응답의 콘텐츠 유형이 코드에서 다릅니다. 따라서 헤더를 확인하십시오.

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

---

create-react-app로컬 json 파일을 가져오고 가져 오려는 사람들 .

에서 create-react-app와 같이 webpack-dev-server요청을 처리하고 모든 요청에 ​​대해 서비스를 제공하는 데 사용됩니다 index.html. 그래서 당신은 점점

SyntaxError : JSON에서 0 위치의 예기치 않은 토큰 <

이를 해결하려면 앱을 꺼내고 webpack-dev-server구성 파일을 수정해야 합니다.

여기 에서 단계를 수행 할 수 있습니다 .

---

이것으로 많은 시간을 보낸 후, 제 경우에는 문제가 내 package.json 파일에 "홈페이지"가 ​​정의되어 내 응용 프로그램이 firebase (동일한 '토큰'오류)에서 작동하지 않는 것으로 나타났습니다. create-react-app를 사용하여 반응 앱을 만든 다음 READ.me 파일의 firebase 가이드를 사용하여 github 페이지에 배포하고 라우터가 작동하기 위해 추가 작업을 수행하고 firebase로 전환해야한다는 것을 깨달았습니다. github 안내서는 package.json에 홈페이지 키를 추가하고 배포 문제를 일으켰습니다.

---

Protip : 로컬 Node.js 서버에서 json을 테스트하십니까? 해당 경로로 연결되는 경로가 없는지 확인하십시오.

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

---

일반적으로이 오류는 구문 오류가있는 JSON 오브젝트를 구문 분석 할 때 발생합니다. 메시지 속성에 이스케이프되지 않은 큰 따옴표가 포함 된 다음과 같은 것을 생각하십시오.

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

If you have JSON in your app somewhere then it's good to run it through JSONLint to verify that it doesn't have a syntax error. Usually this isn't the case though in my experience, it's usually JSON returned from an API that's the culprit.

When an XHR request is made to an HTTP API that returns a response with a Content-Type:application/json; charset=UTF-8 header which contains invalid JSON in the response body you'll see this error.

If a server-side API controller is improperly handling a syntax error, and it's being printed out as part of the response, that will break the structure of JSON returned. A good example of this would be an API response containing a PHP Warning or Notice in the response body:

<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% of the time this is the source of the issue for me, and though it's somewhat addressed here in the other responses I didn't feel it was clearly described. Hopefully this helps, if you're looking for a handy way to track down which API response contains a JSON syntax error I've written an Angular module for that.

Here's the module:

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

More details can be found in the blog article referenced above, I haven't posted everything found there here as it's probably not all relevant.

---

For me, this happened when one of the properties on the object I was returning as JSON threw an exception.

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

Adding a null check, fixed it for me:

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

---

just something basic to check, make sure you dont have anything commented out in the json file

//comments here will not be parsed and throw error

---

Just to add to the answers, it also happens when your API response includes

<?php{username: 'Some'}

which could be a case when your backend is using PHP.

---

In python you can use json.Dump(str) before send result to html template. with this command string convert to correct json format and send to html template. After send this result to JSON.parse(result) , this is correct response and you can use this.

---

For some, this may help you guys: I had a similar experience with Wordpress REST API. I even used Postman to check if I had the correct routes or endpoint. I later found out that I accidentally put an "echo" inside my script - hooks:

Debug & check your console

Cause of the error

So basically, this means that I printed a value that isn't JSON that is mixed with the script that causes AJAX error - "SyntaxError: Unexpected token r in JSON at position 0"

---

This might cause due to your javascript code is looking at some json response and you received something else like text.

---

I was having same problem. I am using a simple node.js server to send response to a client made in Angular 7. Initially I was sending response.end('Hello world from nodejs server'); to client but somehow angular was unable to parse it.

---

In my case (backend), I was using res.send(token);

Everything got fixed when I changed to res.send(data);

You may want to check this if everything is working and posting as intended, but the error keeps popping up in your front-end.

---

Unexpected token < in JSON at position 0

A simple solution to this error is to write a comment in styles.less file.

참고URL : https://stackoverflow.com/questions/37280274/syntaxerror-unexpected-token-in-json-at-position-0