SyntaxError：XMLHttpRequest.onLoad 处 JSON.parse (<anonymous>) 位置 0 处的 JSON 中的意外标记 <答案

【问题标题】：SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoadSyntaxError：XMLHttpRequest.onLoad 处 JSON.parse (<anonymous>) 位置 0 处的 JSON 中的意外标记 <
【发布时间】：2019-05-15 00:56:51
【问题描述】：

希望这不是一个愚蠢的问题。连接 ionic 和 java springboot ，当应用程序在浏览器中实时服务并且数据正确显示时，没有错误消息。但是在 android 设备上测试时出现 SyntaxError: Unexpected token

我搜索了一下，发现这个问题与 JSON 解析有关，但我不太明白为什么浏览器中没有报告错误消息。

我想在这里做什么：我有一个带有姓名和电子邮件的表用户，我正在连接以在前端显示所有名称。后端返回一个列表。

我也使用了 chrome CROS 扩展，但我认为这根本不相关。谁能帮忙解释一下？多谢

   typescript
   ngOnInit() {
      this.surgeonList = [
      ];
      console.log(this.value);
      this.httpclient.get('http://localhost:8080/users'
      ).subscribe(
          data => {
              data = JSON.parse(JSON.stringify(data));
              for (var i  = 0 ; i < (<Array<any>>data).length; i++) {
                  this.surgeonList.push(
                      {
                          name: data[i].lastname,
                          icon: 'person'
                      }
                  );
              }
          }
      );
  }

JAVA spring controller

    @GetMapping("/users")
    public List getUsers(){
        List users = userRepository.findAll();
        return users;
    }

get 请求响应正确记录数据：

[
    {
        "id": 2,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen698698@gmail.com",
        "password": "613387"
    },
    {
        "id": 3,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": null
    },
    {
        "id": 4,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": null
    },
    {
        "id": 5,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": null
    },
    {
        "id": 6,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": null
    },
    {
        "id": 7,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": "123333"
    },
    {
        "id": 8,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": "123333"
    },
    {
        "id": 9,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": "123333"
    },
    {
        "id": 10,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": "123333"
    },
    {
        "id": 11,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": "123333"
    },
    {
        "id": 12,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": "123333"
    },
    {
        "id": 13,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": "123333"
    },
    {
        "id": 14,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": "123333"
    },
    {
        "id": 15,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": "123333"
    },
    {
        "id": 16,
        "lastname": "Liu",
        "firstname": "Jerry",
        "email": "karen77777",
        "password": "123333"
    },
    {
        "id": 17,
        "lastname": "chenniuniu",
        "firstname": "Jerry",
        "email": "chenniuniu@gmail.com",
        "password": "613387"
    },
    {
        "id": 18,
        "lastname": "chendada",
        "firstname": "Jerry",
        "email": "chendaada@bobo.com",
        "password": "613387"
    },
    {
        "id": 19,
        "lastname": "chendada",
        "firstname": "Jerry",
        "email": "chendaada@bobo.com",
        "password": "613387"
    },
    {
        "id": 20,
        "lastname": "VFVSD",
        "firstname": "Jerry",
        "email": "DSFSDF",
        "password": "FDSFSDFDS"
    },
    {
        "id": 22,
        "lastname": "zhaohua liu",
        "firstname": "Jerry",
        "email": "zliu633@uwo.ca",
        "password": "613387"
    },
    {
        "id": 23,
        "lastname": null,
        "firstname": null,
        "email": "yche98@uwo.ca",
        "password": "613388"
    }
]

但是在 chrome 上远程检查时得到了这个

vendor.js:44729 ERROR 
HttpErrorResponse
error:
error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad

重新编辑：

谢谢你们的回复我是社区的新手，你们是最棒的。

我发现这里出了什么问题：

当我在浏览器上服务时，我发现响应是正确的 json ，就像你们所有人所说的那样。 response when serve on a browser

但是，当我部署应用并在设备上对其进行远程测试时：我得到了 index.html 作为响应： enter image description here

【问题讨论】：

默认情况下，您从 Angular HttpClient 返回的数据已经是 JSON。无需再次解析。
您似乎正在取回一个 JSON 对象，然后对其进行重新字符串化并对其进行解析。这可能是为什么？
如果您收到您在问题JSON.parse(JSON.stringify(data)) 中提到的响应，那么您的请求的确切输出是什么，这不应该引发任何错误。
我收到的是 Objects 而不是 Json，如果我在不解析的情况下执行 console.log(data)，则响应是 [object Object],[object Object],[object Object],[object Object] .
您的后端无法正确识别请求并正在重新调整 HTML - 正如您在屏幕截图中显示的那样，然后您尝试解析 html，第一个字符是 '

标签： angular spring-boot ionic4

【解决方案1】：

您似乎正在取回一个 JSON 对象，然后对其进行重新字符串化并对其进行解析。这大概就是为什么？

   ngOnInit() {
      this.surgeonList = [
      ];
      console.log(this.value);
      this.httpclient.get('http://localhost:8080/users'
      ).subscribe(
          data => {
          this.surgeonList = data.map(doc=>{
          return {
              doc.lastname,
              icon: 'person'
            }
          })
              
              
          }
      );
  }

【讨论】：

嗨，谢谢，我尝试了代码，现在我确定问题出在 JSON pase 上。我不认为问题出在前端了，弹簧控制器没有发回有效的 Json 数据。
不确定为什么会这样，如果 json 是您在帖子中向我们展示的数据，它会创建一个有效的 json 对象，这里是它的 ts 接口：
声明模块命名空间 { 导出接口 RootObject { id: number;姓氏：字符串；名字：字符串；电子邮件：字符串；密码：字符串； } }
嗨，我发现在浏览器上部署时响应确实是正确的，但是只要我部署了应用程序，我就得到了整个 index.html 页面作为响应。我附上了这些截图

【解决方案2】：

执行以下操作：将@ResponseBody 放在您的控制器上

@GetMapping("/users")
@ResponseBody
public List getUsers(){
    List users = userRepository.findAll();
    return users;
}

或

@GetMapping(value="/users",produces="application/json")
    @ResponseBody
    public List getUsers(){
        List users = userRepository.findAll();
        return users;
    }

或使用@RestController 标注您的班级

【讨论】：