“ SyntaxError:JSON中位置0处的意外令牌<”

2020/10/15 12:41 · javascript ·  · 0评论

在处理类似于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

因为,第一个字符strings&,现在不是有效的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网络响应。因此,调试此问题的步骤可能类似于:

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

教程后,我有相同的错误消息。我们的问题似乎是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-appwebpack-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;它起作用了。

本文地址:http://javascript.askforanswer.com/syntaxerrorjsonzhongweizhi0chudeyiwailingpai.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!