在处理类似Facebook内容供稿的React应用程序组件中,我遇到了一个错误:


Feed.js:94 undefined“ parsererror”“ SyntaxError:JSON中的意外令牌<位置0


我遇到了类似的错误,该错误原来是render函数中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不断尝试连接到服务器,最终使br崩溃owser。

编辑:

我已经使用Chrome开发工具和Chrome REST客户端检查了服务器响应,并且数据似乎是正确的JSON。

EDIT 2:

看起来,尽管预期的API端点确实返回了正确的JSON数据和格式,但是React正在轮询http://localhost:3000/?_=1463499798727而不是预期的http://localhost:3001/api/threads

我在端口3000上运行Webpack热重载服务器,而Express应用程序在端口3001上运行,以返回后端数据。令人沮丧的是,这是我上次对其进行处理时正确执行的操作,并且找不到我可能要更改的内容来破坏它。

评论

这表明您的“ JSON”实际上是HTML。查看从服务器获取的数据。

如果您执行类似JSON.parse(“ ”)之类的错误,则将得到此错误-JSON字符串(您希望使用dataType:'json')不能以<。就像@quantin所说的,它可能是html,也许是某种错误,请与一些其他客户端尝试相同的URL

就像我提到的那样,我尝试了一个空的db(仅返回[]),但它仍然给出相同的错误

您很可能需要根据您的NODE_ENV代理API请求。看到这个:github.com/facebookincubator/create-react-app/blob/master / ...

#1 楼

错误消息的措词与运行JSON.parse('<...')时从Google Chrome浏览器得到的内容相对应。我知道您说服务器正在设置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。

评论


谢谢,我这样做了,你是对的-反应是轮询错误的URL,并返回index.html的内容。我只是找不到原因。

– Cameron Sima
16年5月17日在15:49

尽管我需要使用console.warn(jqxhr.responseText),但感谢您提供了其他调试语句。那对诊断我的问题很有帮助。

–user2441511
16年8月31日在19:50



@ Mimi314159,console.log,console.warn和console.error都将写入控制台。但是,控制台通常会提供“日志记录筛选器”选项,因此请确保根据需要启用或禁用这些选项。

–布莱恩·菲尔德(Bryan Field)
16年8月31日在20:48

就我而言,发生了一个PHP错误,导致服务器返回HTML而不是有效的JSON。

–Derek Sbr /> 17/09/5在20:54

您也可以转到开发人员设置->网络标签以查看实际收到的响应。当您在同一服务器(例如localhost)上运行后端和前端时,就会发生这种情况。要解决此问题,请在React根项目文件夹中的package.json中添加以下行:“ proxy”:“ http:// localhost:5000”,(或您要返回请求的端口而不是5000)。

– Shivam Jha
9月23日7:19



#2 楼

您正在从服务器接收回HTML(或XML),但是dataType: json告诉jQuery解析为JSON。在Chrome开发者工具中检查“网络”标签,以查看服务器响应的内容。

评论


我检查了一下,发现它返回的是格式正确的json。这是响应头:Access-Control-Allow-Origin:* Cache-Control:no-cache Content-Length:2487 Content-Type:application / json; charset = utf-8日期:2016年5月17日,星期二15:34:00 GMT ETag:W /“ 9b7-yi1 / G0RRpr0DlOVc9u7cMw” X-Powered-By:Express

– Cameron Sima
16年5月17日在15:36

@AVI我相信您必须在资源类中指定MIME类型。 (例如)@Produces(MediaType.APPLICATION_JSON)

– DJ2
18年4月23日在19:32

#3 楼

这最终成为我的权限问题。我试图使用cancan访问未经授权的URL,因此该URL切换为users/sign_in。重定向的url响应html,而不响应json。 html响应中的第一个字符是<

评论


并且当您收到HTML作为响应时。.如何重定向到该HTML?谢谢。

– JuMoGar
17年5月24日在22:06

尽管在ASP.NET MVC中,我也一样。对于其他.NETters,我忘了用[AllowAnonymous]属性装饰我的动作,因此框架试图向我返回HTML中未经授权的错误,该错误使我的AJAX调用崩溃了。

–Jason Marsell
17年3月3日在20:26

#4 楼

我遇到了此错误“ SyntaxError:JSON中的意外令牌m在位置上”,其中令牌'm'可以是任何其他字符。

事实证明我错过了JSON中的双引号之一当我使用RESTconsole进行数据库测试时的对象,例如{“ name:” math“},正确的对象应该是{” name“:” math“}

我花了很多精力去弄清楚摆脱这个笨拙的错误。恐怕其他人也会遇到类似的麻烦。

#5 楼

就我而言,我正在获取正在运行的Webpack,结果证明是本地node_modules目录中某处的损坏。

rm -rf node_modules
npm install


...足以获取它再次正常工作。

评论


与此同时,我尝试删除package-lock.json。然后它对我有用。

–马赫什
19年9月5日在7:45

#6 楼

当您将响应定义为application/json并获取HTML作为响应时,会发生此错误。基本上,这是在您为带有JSON响应的特定URL编写服务器端脚本但错误格式为HTML时发生的。

#7 楼

就我而言,该错误是由于我未将返回值分配给变量而导致的。以下是导致错误消息的原因:

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


我将其更改为:

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


没有变量JSON无法正确格式化数据。

#8 楼

我遇到了同样的问题
我从$ .ajax方法中删除了dataType:'json'

#9 楼

确保响应为JSON格式,否则将引发此错误。

#10 楼

简而言之,如果您遇到此错误或类似错误,那仅意味着一件事。也就是说,在我们的代码库中的某个地方,我们期望能够处理有效的JSON格式,但没有得到。例如:

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


会抛出错误,说


未捕获到的SyntaxError:JSON中位置0处的意外令牌s


因为,string中的第一个字符是s,并且它现在不是有效的JSON。这也会在两者之间引发错误。 like:

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网络响应。因此,调试此问题的步骤可能类似于:



curl或点击您正在调用的实际API。
记录/复制响应并尝试解析与JSON.parse。如果遇到错误,请进行修复。
如果没有,请确保您的代码没有更改/更改原始响应。


#11 楼

上完教程后,我有同样的错误信息。我们的问题似乎是ajax调用中的“ 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时,它对服务器进行了正确的调用,我得到了预期的数据。

希望对您有所帮助。

#12 楼

我的问题是我以string的格式返回了数据,该格式不是正确的JSON格式,然后我试图对其进行解析。 simple example: JSON.parse('{hello there}')将在h处给出错误。在我的情况下,回调URL在对象之前返回不必要的字符:employee_names([{"name":....,并且在0处出现e错误。我的回调URL本身存在一个问题,该问题在修复后仅返回对象。

#13 楼

就我而言,对于一个Azure托管的Angular 2/4站点,由于mySite路由问题,我对mySite / api / ...的API调用正在重定向。因此,它是从重定向页面而不是api JSON返回HTML。我在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>


#14 楼

这可能是旧的。但是,它只是发生在角度上,请求和响应的内容类型在我的代码中有所不同。因此,请在React axios中检查
 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)
    });
  },


#15 楼

对于将来的Google员工:
如果服务器端函数崩溃,则会生成此消息。
或者如果服务器端函数甚至不存在(即函数名中的Typo)。
所以-假设您使用的是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

#16 楼

花了很多时间后,我发现我的问题是在package.json文件上定义了“主页”,这导致我的应用无法在Firebase上运行(相同的“令牌”错误)。
我使用create-react-app创建了我的react应用,然后使用READ.me文件上的firebase指南部署到github页面,意识到我必须做额外的工作才能使路由器正常工作,并切换到firebase。 github指南已在package.json上添加了主页密钥,并导致了部署问题。

#17 楼

Protip:在本地Node.js服务器上测试json?确保您还没有路由到该路径的东西

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


#18 楼

一般而言,当解析的JSON对象中包含语法错误时,就会发生此错误。考虑一下这样的情况,其中message属性包含未转义的双引号:

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


如果您的应用程序中有JSON,则最好通过JSONLint运行它以进行验证它没有语法错误。根据我的经验,通常情况并非如此,通常是罪魁祸首的API返回的JSON。

当对HTTP API发出XHR请求时,该API返回带有Content-Type:application/json; charset=UTF-8标头的响应如果响应正文中包含无效的JSON,您将看到此错误。

如果服务器端API控制器未正确处理语法错误,并且将其作为响应的一部分打印出来,则会中断返回JSON的结构。一个很好的例子是在响应正文中包含PHP警告或声明的API响应:

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


更多细节可以在上面引用的博客文章中找到,由于此处可能并不完全相关,我没有在此处发布所有发现的内容。

#19 楼

对我来说,当我作为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;
    }
}


#20 楼

只是基本检查,请确保您在json文件中没有注释任何内容

//comments here will not be parsed and throw error


#21 楼

只是为了增加答案,当您的API响应包含

<?php{username: 'Some'}


时,也会发生这种情况,当您的后端使用PHP时可能就是这种情况。

#22 楼

在python中,您可以在将结果发送到html模板之前使用json.Dump(str)。通过此命令字符串,可以将其转换为正确的json格式并发送到html模板。将结果发送到JSON.parse(result)后,这是正确的响应,您可以使用它。

#23 楼

对于某些人来说,这可能对您有所帮助:
我在Wordpress REST API方面也有类似的经历。我什至用邮差来检查我是否有正确的路由或端点。后来我发现我不小心在脚本中放了一个“ echo”-钩子:

调试并检查您的控制台

错误原因

因此,基本上,这意味着我打印的值不是与导致AJAX错误的脚本混合的JSON-“ SyntaxError:JSON在位置0处出现意外的标记r”

#24 楼

那些正在使用create-react-app并尝试获取本地json文件的人。

create-react-app一样,webpack-dev-server用于处理请求,并为每个请求提供index.html服务。因此,您会得到


SyntaxError:JSON中位置0处的意外令牌<。


要解决此问题,您需要弹出应用程序并修改webpack-dev-server配置文件。

您可以按照此处的步骤进行操作。

#25 楼

在我的情况(后端)中,我使用的是res.send(token);

当我更改为res.send(data)时,一切都已固定;

检查是否一切正常,并按预期进行发布,但是错误始终在您的前端弹出。

#26 楼

此错误的可能性是巨大的。

就我而言,我发现问题是由添加在homepage中提交的package.json引起的。

值得检查:package.json中的更改:

homepage: "www.example.com"




hompage: ""   


#27 楼

在我的案例中,标题中的“ Bearer”存在问题,理想情况下应为“ Bearer”(末尾字符后的空格),但在我的案例中,这是“ Bearer”,字符后无空格。希望对您有所帮助!

#28 楼


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


#29 楼

这可能是由于您的JavaScript代码正在查看某些json响应而您收到了其他类似文本的内容。

评论


除非他们直接解决问题,否则请在给出答案时详细说明,而不要给出一个衬里。这种解释将有助于寻求答案的人更好地理解解决方案。

–赖
18-11-26在11:41

#30 楼

如果其他人正在使用Mozilla中Web API的“使用抓取”文档中的抓取方法:
(这非常有用: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;起作用了。