“SyntaxError：意外的令牌 < 在 JSON 中的位置 0”
在处理类似 Facebook 的内容提要的 React 应用程序组件中，我遇到了一个错误：
Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0
我遇到了一个类似的错误，结果证明是渲染函数中的 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 热重载服务器，并在端口 3001 上运行 express 应用程序以返回后端数据。令人沮丧的是，我上次处理它时它工作正常，但找不到我可能改变的东西来破坏它。
JSON.parse("<foo>") 之类的操作，就会出现这种错误——JSON 字符串（您希望使用 dataType: 'json'）不能以 < 开头。
NODE_ENV 代理 API 请求。看到这个：github.com/facebookincubator/create-react-app/blob/master/…
错误消息的措辞与您在运行 JSON.parse('<...') 时从 Google Chrome 获得的内容相对应。我知道您说服务器正在设置 Content-Type:application/json，但我被引导相信响应 body 实际上是 HTML。
Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0" with line 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 开发工具中的“网络”选项卡以查看服务器响应的内容。
@Produces(MediaType.APPLICATION_JSON)
这最终对我来说是一个权限问题。我试图访问我没有使用 cancan 授权的 URL，因此该 URL 已切换到 users/sign_in。重定向的 url 响应 html，而不是 json。 html 响应中的第一个字符是 <。
SyntaxError: 位置 0 处的 JSON 中的意外标记 <
您得到的是 HTML 文件（或 XML）而不是 json。
Html 文件以 <!DOCTYPE html> 开头。
我通过忘记 fetch 方法中的 https:// 来“实现”此错误：
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文件。
解决方案：
我通过在我的 fetch 方法中添加回 https:// 来修复错误。
fetch(`https://api.github.com/users/${login}`)
.then(response => response.json())
.then(setData)
.catch(error => (console.log(error)));
就我而言，我正在运行这个 webpack，结果发现本地 node_modules 目录中的某个地方出现了一些损坏。
rm -rf node_modules
npm install
...足以让它再次正常工作。
我遇到了这个错误“SyntaxError: Unexpected token m in JSON at position”，其中标记“m”可以是任何其他字符。
原来我在使用 RESTconsole 进行 DB 测试时遗漏了 JSON 对象中的双引号之一，为 {"name: "math"}，正确的应该是 {"name": "math"}
我费了好大劲才弄清楚这个笨拙的错误。恐怕其他人也会遇到类似的问题。
当您将响应定义为 application/json 并且您获得 HTML 作为响应时，会发生此错误。基本上，当您使用 JSON 响应为特定 url 编写服务器端脚本但错误格式为 HTML 时，就会发生这种情况。
我面临着同样的问题。
我从 $.ajax 方法中删除了 dataType:'json'。
那些正在使用 create-react-app 并试图获取本地 json 文件的人。
与在 create-react-app 中一样，webpack-dev-server 用于处理请求并为每个请求提供服务 index.html。所以你得到
SyntaxError: 位置 0 处的 JSON 中的意外标记 <。
要解决此问题，您需要弹出应用程序并修改 webpack-dev-server 配置文件。
您可以按照 here 中的步骤操作。
简而言之，如果您收到此错误或类似错误，那仅意味着一件事。也就是说，在我们的代码库中的某个地方，我们期望处理有效的 JSON 格式，但我们没有得到。例如：
var string = "some string";
JSON.parse(string)
会抛出一个错误，说
Uncaught SyntaxError: 位置 0 处 JSON 中的意外标记
因为，string 中的第一个字符是 s &它现在不是有效的 JSON。这也可能在两者之间引发错误。喜欢：
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 解析它。如果您遇到错误，请修复它。如果没有，请确保您的代码没有改变/更改原始响应。
我的情况是错误是我没有将返回值分配给变量的结果。以下导致错误消息：
return new JavaScriptSerializer().Serialize("hello");
我将其更改为：
string H = "hello";
return new JavaScriptSerializer().Serialize(H);
没有变量 JSON 无法正确格式化数据。
对于未来的谷歌人：
如果服务器端函数崩溃，将生成此消息。
或者，如果服务器端函数甚至不存在（即函数名称中的 Typo）。
所以 - 假设您正在使用 GET 请求......并且一切看起来都很完美，并且您已经对所有内容进行了三重检查......
再次检查该 GET 字符串。我的是：
'/theRouteIWant&someVar=Some value to send'
应该
'/theRouteIWant?someVar=Some value to send'
^
碰撞 ！ （...隐形，在服务器上...）
Node/Express 发回了非常有用的信息：
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
<head> 或 <body> 开头，第一个字母是“<”。
就我而言，对于 Azure 托管的 Angular 2/4 站点，由于 mySite 路由问题，我对 mySite/api/... 的 API 调用正在重定向。因此，它从重定向页面返回 HTML，而不是 api JSON。我在 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>
2022 更新：几年前写过这篇文章。我将此建议称为一种解决方法 - 直接修复。更好的托管模式是不要尝试在您的网站路径下托管这些 api 路径；相反，将它们完全托管在单独的基本 URL 上。对于我的用例示例，API 和 Web 路径将是完全独立的 Azure Web 服务，并且会获得不同的 URL 端点。
我的问题是我在 string 中取回数据，该数据不是正确的 JSON 格式，然后我试图解析它。 simple example: JSON.parse('{hello there}') 将在 h 处出错。在我的情况下，回调 url 在对象之前返回了一个不必要的字符：employee_names([{"name":....，并且在 0 处出现错误。我的回调 URL 本身有一个问题，修复后只返回对象。
一般而言，当解析包含语法错误的 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 module for that。
这是模块：
/**
* 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 格式，否则会触发此错误。
在使用 fetch API 和 POST 方法调用 React 中的 API 时，我遇到了同样的错误。
前：
fetch('/api/v1/tour',{
method:"POST",
headers:{"Content-type":"json/application"},
body:JSON.stringify(info)
})
.then((response)=>response.json())
.then((json)=>{
if(json.status === 'success')
alert(json.message)
else
console.log('something went wrong :(')
}).catch(e=>console.log(e))
我通过将标题更改为 {"Content-type":"application/json"} 解决了该错误：
后：
fetch('/api/v1/tour',{
method:"POST",
headers:{"Content-type":"application/json"},
body:JSON.stringify(info)
})
.then((response)=>response.json())
.then((json)=>{
if(json.status === 'success')
alert(json.message)
else
console.log('something went wrong :(')
}).catch(e=>console.log(e))
在教程之后，我收到了相同的错误消息。我们的问题似乎是 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，它正确调用了服务器，我得到了预期的数据。
我希望它有所帮助。
这个错误的可能性是压倒性的。
就我而言，我发现问题是在 package.json 中添加 homepage 导致了问题。
值得检查：在 package.json 中更改：
homepage: "www.example.com"
至
hompage: ""
如其他答案所述，格式错误的 JSON 或 HTML 而不是 JSON 是此问题的根本原因，但是在我的情况下，我无法可靠地复制此错误，就好像服务器有时返回有效的 JSON，而有时返回一些东西其他类似 HTML 错误页面或类似内容。
为了避免它完全破坏页面，我求助于手动尝试解析返回的内容，并分享它以防它帮助其他人为他们解决它。
const url = "https://my.server.com/getData";
fetch(url).then(response => {
if (!response.ok) return; // call failed
response.text().then(shouldBeJson => { // get the text-only of the response
let json = null;
try {
json = JSON.parse(shouldBeJson); // try to parse that text
} catch (e) {
console.warn(e); // json parsing failed
return;
};
if (!json) return; // extra check just to make sure we have something now.
// do something with my json object
});
});
虽然这显然不能解决问题的根本原因，但它仍然可以帮助更优雅地处理问题并在失败时采取某种合理的措施。
对于 CRA 制作的 React 应用程序，我们在获取任何 <dummy.json> 文件的 JSON 数据时可能会遇到两个主要问题。
我的项目中有我的 dummy.json 文件，并试图从该文件中获取 JSON 数据，但出现两个错误：
"SyntaxError: Unexpected token < in JSON at position 0 .
在 Chrome 或任何浏览器的“网络”选项卡中的响应中，我得到了一个 HTML 文件而不是实际的 JSON 数据。
以下是解决我的问题的两个主要原因。
您的 JSON 数据在 JSON 文件中无效。可能是 JSON 文件没有为此正确加载，因此您只需重新启动 React 服务器。这是我的问题，在 React 中。
反应直接运行或访问公用文件夹而不是 src 文件夹。
我是如何解决的：
我将我的文件移动到公用文件夹中，并且可以直接在 src 文件夹的任何文件中访问。
https://i.stack.imgur.com/5WmSM.jpg
在 Redux action.js 中进行 REST 调用：
export const fetchDummy = ()=>{
return (dispatch)=>{
dispatch(fetchDummyRequest());
fetch('./assets/DummyData.json')
.then(response => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
return response.json();
})
.then(result => {
dispatch(fetchDummySuccess(result))
})
.catch(function (err) {
dispatch(fetchDummyFailure(err))
})
}
}
这可能是旧的。但它只是发生在 Angular 中，我的代码中请求和响应的内容类型不同。所以检查标题
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({
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 返回的对象的属性之一引发异常时，就会发生这种情况。
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
在 python 中，您可以在将结果发送到 html 模板之前使用 json.Dump(str)。使用此命令字符串转换为正确的 json 格式并发送到 html 模板。将此结果发送到 JSON.parse(result) 后，这是正确的响应，您可以使用它。
对于某些人来说，这可能会对你们有所帮助：我在 Wordpress REST API 方面也有过类似的经历。我什至使用 Postman 来检查我是否有正确的路线或端点。后来我发现我不小心在我的脚本中放了一个“回声” - 钩子：
所以基本上，这意味着我打印了一个不是 JSON 的值，它与导致 AJAX 错误的脚本混合 - “SyntaxError: Unexpected token r in JSON at position 0”
就我而言（后端），我使用的是 res.send(token);
当我更改为 res.send(data); 时，一切都得到了解决；
如果一切正常并按预期发布，您可能需要检查这一点，但错误不断在您的前端弹出。
在我的情况下，标题中的“Bearer”存在问题，理想情况下它应该是“Bearer”（结束字符后的空格），但在我的情况下，它是“Bearer”，字符后没有空格。希望它可以帮助某人！
console.warn(jqxhr.responseText)。这对诊断我的问题非常有帮助。console.log、console.warn和console.error都会写入您的控制台。但是，控制台通常会提供日志过滤器选项，因此请确保根据您的喜好启用或禁用这些选项。React根项目文件夹内的package.json中添加以下行："proxy": "http://localhost:5000"，（或您希望返回请求的端口而不是5000）。