在处理类似于Facebook的内容提要的React应用程序组件中,我遇到了一个错误:
Feed.js:94未定义“ 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:
看起来,尽管预期的API端点确实返回了正确的JSON数据和格式,但是React正在轮询http://localhost:3000/?_=1463499798727
而不是预期的http://localhost:3001/api/threads
。
我在端口3000上运行Webpack热重载服务器,而Express应用程序在端口3001上运行,以返回后端数据。令人沮丧的是,这是我上次对其进行处理时正确执行的操作,并且找不到我可能要更改的功能来破坏它。
错误消息的措词与运行时从Google 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: json
告诉jQuery解析为JSON。在Chrome开发者工具中检查“网络”标签,以查看服务器响应的内容。
这最终成为我的权限问题。我试图通过Cancan访问未经授权的网址,因此该网址已切换为users/sign_in
。重定向的url响应html,而不响应json。html响应中的第一个字符是<
。
我遇到此错误“ SyntaxError:JSON中位置处的意外令牌m”,其中令牌“ m”可以是任何其他字符。
原来,当我使用RESTconsole进行数据库测试时,我错过了JSON对象中的双引号之一,例如{“ name:” math“},正确的应该是{” name“:” math“}
我花了很多力气才找出这个笨拙的错误。恐怕其他人会遇到类似的麻烦。
就我而言,我正在运行此Webpack,结果发现它在本地node_modules目录中的某个地方损坏了。
rm -rf node_modules
npm install
...足以使其再次正常工作。
就我而言,该错误是由于我未将返回值分配给变量而导致的。导致错误消息的原因如下:
return new JavaScriptSerializer().Serialize("hello");
我将其更改为:
string H = "hello";
return new JavaScriptSerializer().Serialize(H);
没有变量,JSON无法正确格式化数据。
当您将响应定义为application/json
并且您将HTML作为响应时,会发生此错误。基本上,当您使用JSON响应为特定URL编写服务器端脚本但错误格式为HTML时,就会发生这种情况。
我遇到了同样的问题,
我从$ .ajax方法中删除了dataType:'json'
确保响应为JSON格式,否则会引发此错误。
简而言之,如果您遇到此错误或类似错误,那仅意味着一件事。也就是说,在我们的代码库中的某个地方,我们期望能够处理有效的JSON格式,但没有得到。例如:
var string = "some string";
JSON.parse(string)
会抛出一个错误,说
未捕获到的SyntaxError:JSON中位置0处的意外令牌s
因为,第一个字符string
是s
&,现在不是有效的JSON。这也会在两者之间引发错误。喜欢:
var invalidJSON= '{"foo" : "bar", "missedquotehere : "value" }';
JSON.parse(invalidJSON)
会抛出错误:
VM598:1 Uncaught SyntaxError: Unexpected token v in JSON at position 36
因为我们有意错过了invalidJSON
位置36的JSON字符串中的引号。
如果您解决此问题,请执行以下操作:
var validJSON= '{"foo" : "bar", "missedquotehere : "value" }';
JSON.parse(validJSON)
将为您提供JSON对象。
现在,可以在任何地方和任何框架/库中引发此错误。大多数时候,您可能正在读取无效的JSON网络响应。因此,调试此问题的步骤可能类似于:
curl
或点击您正在调用的实际API。- 记录/复制响应,然后尝试使用进行解析
JSON.parse
。如果遇到错误,请修复它。 - 如果不是,请确保您的代码没有更改/更改原始响应。
教程后,我有相同的错误消息。我们的问题似乎是ajax调用中的“ url:this.props.url”。在创建元素时,在React.DOM中,我的看起来像这样。
ReactDOM.render(
<CommentBox data="/api/comments" pollInterval={2000}/>,
document.getElementById('content')
);
好吧,这个CommentBox在其props中没有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路由问题,我对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>
这可能是旧的。但是,它只是发生在角度上,请求和响应的内容类型在我的代码中有所不同。因此,请检查标头,
let headers = new Headers({
'Content-Type': 'application/json',
**Accept**: 'application/json'
});
在React axios中
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)
});
},
在花了很多时间之后,我发现在我的情况下,问题是在package.json文件上定义了“主页”,导致我的应用无法在Firebase上运行(相同的“令牌”错误)。我使用create-react-app创建了我的react应用,然后使用READ.me文件上的firebase指南部署到github页面,意识到我必须做额外的工作才能使路由器正常工作,然后切换到firebase。github指南已在package.json上添加了主页密钥,并导致了部署问题。
Protip:在本地Node.js服务器上测试json?确保您还没有路由到该路径的东西
'/:url(app|assets|stuff|etc)';
一般而言,当解析的JSON对象中包含语法错误时,就会发生此错误。考虑一下这样的情况,其中message属性包含未转义的双引号:
{
"data": [{
"code": "1",
"message": "This message has "unescaped" quotes, which is a JSON syntax error."
}]
}
如果您的应用中的某个地方有JSON,则最好通过JSONLint运行它以验证它没有语法错误。根据我的经验,通常不是这种情况,通常是罪魁祸首从API返回的JSON。
当对HTTP API发出XHR请求时,该请求返回的响应的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' );
} ] );
可以在上面引用的博客文章中找到更多详细信息,由于它可能并不完全相关,因此我没有在此处发布所有发现的内容。
对我来说,当我作为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;
}
}
只是基本检查,请确保您在json文件中没有注释任何内容
//comments here will not be parsed and throw error
只是为了增加答案,当您的API响应包括
<?php{username: 'Some'}
当您的后端使用PHP时,可能是这种情况。
在python中,您可以在将结果发送到html模板之前使用json.Dump(str)。使用此命令字符串转换为正确的json格式并发送到html模板。将结果发送到JSON.parse(result)之后,这是正确的响应,您可以使用它。
对于某些人来说,这可能对您有帮助:我在Wordpress REST API方面也有类似的经验。我什至用邮差来检查我是否有正确的路由或端点。后来我发现我不小心在脚本中放了一个“ echo”-钩子:
因此,基本上,这意味着我打印的值不是与导致AJAX错误的脚本混合的JSON-“ SyntaxError:JSON位置0处的意外令牌r”
那些正在使用create-react-app
并尝试获取本地json文件的人。
与中的一样create-react-app
,webpack-dev-server
用于处理请求,并为每个请求提供服务index.html
。所以你越来越
SyntaxError:JSON中位置0处的意外令牌<。
要解决此问题,您需要弹出应用程序并修改webpack-dev-server
配置文件。
您可以从这里开始。
就我而言(后端),我正在使用res.send(token);
当我更改为res.send(data);时,一切都固定了;
如果一切正常,并按预期进行发布,则可能需要检查此内容,但是错误始终在前端弹出。
此错误的可能性是巨大的。
以我为例,我发现问题是由homepage
文件中的内容package.json
引起的。
值得检查:package.json
更改中:
homepage: "www.example.com"
至
hompage: ""
在我的案例中,标题中的“ Bearer”存在问题,理想情况下应为“ Bearer”(末尾字符后的空格),但在我的案例中,这是“ Bearer”,字符后无空格。希望对您有所帮助!
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)));
对于未来的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
这可能是由于您的JavaScript代码正在查看某些json响应而导致您收到了其他类似文本的信息。
如果其他人正在使用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;
它起作用了。
文章标签:javascript , json , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!