Question

在处理类似Facebook的内容供稿的React应用程序组件中，我遇到了错误：

Feed.js：94 undefined“parsererror”“SyntaxError：位于0的JSON中的意外标记＆lt;

我遇到了一个类似的错误，结果是渲染函数中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应用程序以返回后端数据。令人沮丧的是，这是我上一次工作时正常工作，无法找到我可以改变的东西来打破它。

Answer 1

错误消息的措辞与您在运行JSON.parse('<...')时从Google Chrome中获得的内容相对应。我知道你说服务器正在设置Content-Type:application/json，但我认为响应 body 实际上是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。

Answer 2

您正在从服务器接收HTML（或XML），但dataType: json告诉jQuery要解析为JSON。检查＆＃34;网络＆＃34; Chrome开发工具中的标签用于查看服务器响应的内容。

Answer 3

这最终成为我的权限问题。我试图访问我没有使用cancan授权的网址，因此网址已切换为users/sign_in。重定向的url响应html，而不是json。 html响应中的第一个字符是<。

Answer 4

就我而言，我正在运行这个正在运行的webpack，结果在本地node_modules目录中出现了一些损坏。

rm -rf node_modules
npm install

......足以让它再次正常运作。

Answer 5

我遇到了这个错误“SyntaxError：位于JSON的意外令牌m”，其中令牌“m”可以是任何其他字符。

事实证明，当我使用RESTconsole进行数据库测试时，我错过了JSON对象中的一个双引号，{{name：“math”}，正确的应该是{“name”：“math” }

我花了很多心思才弄清楚这个笨拙的错误。我担心其他人会遇到类似的失败者。

Answer 6

我的情况是错误是因为我没有将返回值赋给变量。以下导致错误消息：

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

我把它改为：

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

如果没有变量，JSON无法正确格式化数据。

Answer 7

将响应定义为application/json并且您将HTML作为响应时，会发生此错误。基本上，当您使用JSON的响应编写特定URL的服务器端脚本时，会发生这种情况，但错误格式是HTML格式。

Answer 8

正在使用create-react-app并试图获取本地json文件的人。

与create-react-app中一样，webpack-dev-server用于处理请求，对于每个请求，它都为index.html服务。所以你得到

SyntaxError：JSON中位置0处的意外令牌<。

要解决此问题，您需要弹出应用程序并修改webpack-dev-server配置文件。

您可以按照here中的步骤进行操作。

Answer 9

确保响应为JSON格式，否则会引发此错误。

Answer 10

这可能是旧的。但是，它只是以角度出现，请求和响应的内容类型在我的代码中是不同的。因此，请检查标题，

 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)
    });
  },

Answer 11

针对未来的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

Answer 12

就我而言，对于Azure托管的Angular 2/4站点，由于mySite路由问题，我对mySite / api / ...的API调用正在重定向。因此，它从重定向页面而不是api JSON返回HTML。我在api路径的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>

Answer 13

我的问题是我在string中获取的数据不是正确的JSON格式，然后我试图解析它。 simple example: JSON.parse('{hello there}')会在h发出错误。在我的情况下，回调url在对象之前返回一个不必要的字符：employee_names([{"name":....并且在e处得到错误0.我的回调URL本身有一个问题，当修复时，只返回对象。

Answer 14

我在教程后面有同样的错误消息。我们的问题似乎是＆＃39; url：this.props.url＆＃39;在ajax电话中。在React.DOM中，当你创建元素时，我看起来像这样。

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

好吧，这个CommentBox的道具中没有url，只有数据。当我切换url: this.props.url - ＆gt; url: this.props.data，它对服务器进行了正确的调用，我收回了预期的数据。

我希望它有所帮助。

Answer 15

格式错误的 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
  });
});

虽然这显然不能解决问题的根本原因，但它仍然有助于更优雅地处理问题，并在失败时采取某种合理的措施。

Answer 16

如果您在 Chrome 扩展程序上收到此错误，则很难追踪，尤其是在您安装扩展程序时发生的错误。但是，我找到了一种方法，可以使它变得更容易。就我而言，我有一个 Chrome 扩展程序，它在安装插件时从我的网络服务器调用一些脚本，拉下一些默认设置。我收到错误：

SyntaxError: Unexpected token < in JSON at position 0 in _generated_background_page.html

当你得到这个时，进入扩展，找到你的扩展，点击“背景页面”超链接，检查器会打开它。然后，转到网络并单击 CTRL+R。现在，您将看到背景页面必须加载的所有内容。单击每个，尤其是连接回远程服务器的那些。然后，您将在“网络”选项卡中看到“标题”，然后是“预览”。查看每个项目的预览。如果您看到的不是用于预期此数据的标头，或者您看到错误，那么这可能是您的原因。就我而言，我的服务器脚本正在调用另一个脚本，并且该脚本中有一个错误（运行时缺少变量），这使我的 application/json 标头与它发送的数据不匹配，因此出现了意外的令牌错误。

Answer 17

就我而言，当尝试在测试 api 节点中发送数据时，json 对象在末尾有一个额外的逗号

POST   http://localhost:9000/api/posts/ 
Content-Type: application/json

{
    "title": "sokka",
    "description": "hope this works",
    "username": "sokka blog4",
}

此后我只需要删除最后一个多余的逗号并发送此类数据

POST   http://localhost:9000/api/posts/ 
Content-Type: application/json

{
    "title": "sokka",
    "description": "hope this works",
    "username": "sokka blog4"
}

我使用 RESTclient 扩展来测试我的 api。

Answer 18

SyntaxError：JSON中位置0以外的意外令牌<< / p>

您正在获取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)));

Answer 19

在我的情况下，标题中的“ Bearer”存在问题，理想情况下应为“ Bearer”（末尾字符后的空格），但在我的情况下，这是“ Bearer”，字符后无空格。希望对您有所帮助！

Answer 20

我面临着同样的问题
我从$ .ajax方法中删除了 dataType：'json'

Answer 21

简而言之，如果您遇到此错误或类似错误，则仅意味着一件事。也就是说，在代码库中的某个地方，我们期望要处理的是有效的JSON格式，但没有得到。例如：

var string = "some string";
JSON.parse(string)

会抛出一个错误，说

未捕获的SyntaxError：JSON中位置0处的意外令牌

因为，string中的第一个字符是s并且现在不是有效的JSON。这也会在两者之间引发错误。喜欢：

var invalidJSON= '{"foo" : "bar", "missedquotehere : "value" }';
JSON.parse(invalidJSON)

会抛出错误：

VM598:1 Uncaught SyntaxError: Unexpected token v in JSON at position 36

因为我们故意在位置36的JSON字符串invalidJSON中省略了引号。

如果您解决了该问题，

var validJSON= '{"foo" : "bar", "missedquotehere : "value" }';
JSON.parse(validJSON)

将为您提供JSON对象。

现在，可以在任何地方和任何框架/库中引发此错误。大多数时候，您可能正在读取无效的JSON网络响应。因此，调试此问题的步骤可能类似于：

curl或点击您正在调用的实际API。
记录/复制响应，然后尝试使用JSON.parse进行解析。如果遇到错误，请修复它。
如果没有，请确保您的代码没有更改/更改原始响应。

Answer 22

此错误的可能性是巨大的。

就我而言，我发现问题是由于添加了homepage中提交的package.json而引起的。

值得检查：在package.json中进行更改：

homepage: "www.example.com"

到

hompage: ""

Answer 23

For the React app which made by CRA.
There is two main problem we might face while fetch the json data if any <dummy.json> 
FILE.

I have my dummy.json file in my project and trying to fetch the json data from that file but I got 2 following errors.
1:  "SyntaxError: Unexpected token < in JSON at position 0 .
2: I got an HTML file rather than actual json Data in the response of network tab in chrome or any browser.

Here is the main 3 reason behind that and I solved my issue .
1: Your json data is invalid in your json file.
2: Might be json file not load properly for this you just restart you react server.
3: This is my issue . **In React ** 
*React direct running or access the public folder not the src folder*
how I solved it 

> For solving the issue I just move my file into the public folder and access is directly in any file of src folder.
[![my public foler][1]][1]

    making rest call in redux action.js file 
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))
        })
}

}

  [1]: https://i.stack.imgur.com/5WmSM.jpg

Answer 24

在我的情况（后端）中，我使用的是res.send（token）;

当我更改为res.send（data）;时，所有事情都已解决；

您可能想检查一下是否一切正常，并按预期进行发布，但是错误始终在您的前端弹出。

Answer 25

我遇到了同样的问题。我正在使用一个简单的node.js服务器将响应发送到Angular 7中制作的客户端。最初，我正在发送response.end（'Hello world from nodejs server'）; 客户端，但是不知何故Angular无法解析它。

Answer 26

这可能是由于您的JavaScript代码正在查看某些json响应，并且您收到了诸如文本之类的东西。

Answer 27

对于某些人来说，这可能对您有帮助：我对Wordpress REST API也有类似的经验。我什至用邮差来检查我是否有正确的路由或端点。后来我发现我不小心在脚本中放了一个“ echo”-钩子：

Debug & check your console

Cause of the error

所以基本上，这意味着我打印的值不是JSON，而该值与会导致AJAX错误的脚本混合-“ SyntaxError：JSON中位置0处的意外令牌r”

Answer 28

在python中，您可以在将结果发送到html模板之前使用json.Dump（str）。使用此命令字符串转换为正确的json格式并发送到html模板。将此结果发送到JSON.parse（结果）后，这是正确的响应，您可以使用它。

Answer 29

对我来说，当我作为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;
    }
}

Answer 30

在一般级别上，当解析其中包含语法错误的JSON对象时，会发生此错误。想想这样的事情，其中message属性包含未转义的双引号：

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

如果您的应用在某处有JSON，那么通过JSONLint运行JSON以确认它没有语法错误是很好的。通常情况并非如此，但根据我的经验，通常从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' );
    } ] );

更多细节可以在上面引用的博客文章中找到，我还没有发布在这里找到的所有内容，因为它可能并非全部相关。

Answer 31

只是添加答案，当您的API响应包括

时也会发生

<?php{username: 'Some'}

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

Answer 32

Protip：在本地Node.js服务器上测试json？确保您没有路由到该路径

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

Answer 33

在花了很多时间之后，我发现在我的情况下问题是我的package.json文件中定义了“主页”使我的应用程序无法在firebase上运行（相同的'令牌'错误）。我使用create-react-app创建了我的反应应用程序，然后我使用READ.me文件上的firebase指南部署到github页面，意识到我必须为路由器工作做额外的工作，并切换到firebase。 github guide在package.json上添加了主页密钥，导致了部署问题。

Answer 34

就我而言，事实证明我从中获取数据的端点 URL 已更改 - 而我并不知道这一点。当我更正 URL 后，我开始获得正确的 JSON。

Answer 35

如果其他人正在使用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;它起作用了。

Answer 36

也许会出现一些权限错误，只需尝试切换浏览器并从授权帐户登录即可。

Answer 37

意外的令牌＆lt;在位置0的JSON中

此错误的简单解决方案是在styles.less文件中撰写评论。

“SyntaxError：在位置0的JSON中出现意外的标记＆lt;”

37 个答案:

您正在获取html文件而不是json。

我验证了我的直觉：

解决方案：