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上运行,以返回后端数据。令人沮丧的是,这是我上次对其进行处理时正确执行的操作,并且找不到我可能要更改的内容来破坏它。
#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;
起作用了。
评论
这表明您的“ JSON”实际上是HTML。查看从服务器获取的数据。如果您执行类似JSON.parse(“
就像@quantin所说的,它可能是html,也许是某种错误,请与一些其他客户端尝试相同的URL
就像我提到的那样,我尝试了一个空的db(仅返回[]),但它仍然给出相同的错误
您很可能需要根据您的NODE_ENV代理API请求。看到这个:github.com/facebookincubator/create-react-app/blob/master / ...