React App中的“SyntaxError:意外的标记<在位置0的JSON中”

在处理类似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数据有关,所以我尝试从一个空白的数据库开始,但错误依然存在。 这个错误似乎是在一个无限循环中调用的,据推测,React不断尝试连接到服务器,最终导致浏览器崩溃。

编辑:

我使用Chrome开发工具和Chrome REST客户端检查了服务器响应,数据看起来是正确的JSON。

编辑2:

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

我在端口3000上运行webpack热重载服务器,在端口3001上运行快速应用程序以返回后端数据。 这里有什么令人沮丧的是,这是工作正确的最后一次我工作,无法find我可以改变打破它。

错误消息的措辞与您在运行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引发的,并作为variableserr传递给你。 这条线被加下划线的原因只是因为那是你logging它的地方。

我build议你添加到你的日志logging。 查看实际的xhr (XMLHttpRequest)属性以了解更多关于响应的信息。 尝试添加console.warn(xhr.responseText) ,你很可能会看到正在接收的HTML。

您从服务器接收到HTML(或XML),但dataType: json告诉jQuery将其parsing为JSON。 查看Chrome开发工具中的“networking”标签,查看服务器响应的内容。

这最终成为我的权限问题。 我试图访问一个URL,我没有与康康的权限,所以url切换到users/sign_in 。 redirect的url响应html,而不是json。 html响应中的第一个字符是<

我的情况下,错误是由于我没有分配我的返回值的variables。 以下内容导致了错误信息:

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

我把它改成:

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

如果没有variables,JSON将无法正确格式化数据。

在我的情况下,我得到这个正在运行的webpack,结果是在本地node_modules目录中的某处的一些腐败。

 rm -rf node_modules npm install 

足以让它再次正常工作。

我遇到了这个错误:“SyntaxError:JSON在位置上的意外的标记m”,其中标记“m”可以是任何其他字符。

事实certificate,当我使用RESTconsole进行数据库testing时,我错过了JSON对象中的双引号之一,因为{“name:”math“},正确的应该是{”name“:”math“}

我花了很多努力来弄清楚这个笨拙的错误。 我怕其他人会遇到类似的失败者。

我的问题是我得到的数据返回的string不是一个正确的JSON格式,然后我试图parsing它。 simple example: JSON.parse('{hello there}')会在h发生错误。 在我的例子中,callbackurl在对象之前返回了一个不必要的字符: employee_names([{"name":....并且在0处得到错误。我的callbackURL本身有一个问题,当修复时,只返回对象。

在我的情况下(对于Azure托pipe的Angular 2/4站点,mySite / api / …的API调用由于mySite路由问题而redirect,所以它从redirect页面而不是api JSON返回HTML。我在apipath的web.config文件中添加了一个排除项。

我在本地开发时没有收到这个错误,因为Site和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> 

教程后,我有相同的错误信息。 我们的问题在ajax调用中似乎是“url:this.props.url”。 在React.DOM中,当你创build元素时,我的看起来像这样。

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

那么这个CommentBox在道具里没有url,只是数据而已。 当我切换url: this.props.url – > url: this.props.data ,它正确地调用了服务器,我收回了预期的数据。

我希望它有帮助。

花费了大量的时间后,我发现在我的情况下,问题是我的package.json文件中定义的“主页”,使我的应用程序不能在firebase(相同的'令牌'错误)工作。 我使用create-react-app创build了我的反应应用程序,然后使用READ.me文件的firebase指南将其部署到github页面,意识到我必须为路由器工作做额外的工作,并切换到firebase。 github指南在package.json上添加了主页密钥并导致部署问题。

Protip:在本地Node.js服务器上testingjson? 确保你没有路由到这个path

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

只是添加到答案它也发生在您的API响应包括

<?php{username: 'Some'}

这可能是您的后端使用PHP的情况。

在一般的层面上,当parsing出JSON对象中有语法错误时,就会发生这个错误。 想想像这样,消息属性包含未转义的双引号:

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

如果您的应用程序中有JSON,那么通过JSONLint运行它以validation它没有语法错误是很好的。 通常情况并非如此,尽pipe以我的经验来看,通常是从API返回的JSON是罪魁祸首。

当向HTTP API发出XHR请求时,将返回一个Content-Type:application/json; charset=UTF-8响应Content-Type:application/json; charset=UTF-8 Content-Type:application/json; charset=UTF-8在响应正文中包含无效的JSON的Content-Type:application/json; charset=UTF-8头部,你会看到这个错误。

如果服务器端API控制器不正确地处理语法错误,并将其作为响应的一部分打印出来,将会破坏返回的JSON结构。 一个很好的例子就是在response body中包含一个PHP Warning或者Notice的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%的时间是这个问题的根源,尽pipe在其他回答中有一些提及,但我并不认为这是清楚的描述。 希望这有助于,如果你正在寻找一个方便的方法来跟踪哪个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' ); } ] ); 

更多的细节可以在上面引用的博客文章中find,我没有发布在这里find的一切,因为它可能不是全部相关的。

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

对于我来说,当我作为JSON返回的对象上的一个属性抛出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; } } 

添加一个空的检查,为我修复:

 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位置0

这个错误的一个简单的解决scheme是在styles.less文件中写一个注释。