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文件中写一个注释。
