Uncaught SyntaxError: Unexpected token < in JSON at position 1

记录web踩过的坑

情景：

Angular 前台向Java springboot的后台请求一组List

JAVA UserController返回一组List ：

UserController.java

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

Angular前台调用接口

user.service.ts

    public findAll(): Observable {
        return this.httpclient.get('http://localhost:8080/users', {headers : headers
            });
    }

使用service

users: Array[] = [];
..
..
  ngOnInit() {
      this.userService.findAll().subscribe(
          data => {
              console.log('type of response ' + JSON.stringify(data));
              this.users = data;
              // tslint:disable-next-line:no-shadowed-variable
          },   (error: any) => {
              console.log('error', error);
          }
      );
      console.log('user list content: ' + this.users);
  }

浏览器中， 可以获得json返回值：

[{"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"},]

然后打包app后， 发现调用接口的页面报错

Uncaught SyntaxError: Unexpected token < in JSON at position 1

排查错误

尝试1： json返回值格式错误

因为错误是Json.parse, 首先想到的是服务器返回的数据格式不对
尝试解决办法

ionic generate class User

//创建class

export class User {
    id: number;
    lastname: string;
    firstname: string;
    password: string;
    email: string;
}

然后在使用userservice的页面， 把原本的Array换成User[]

users: User[] = [];
..
..
  ngOnInit() {
      this.userService.findAll().subscribe(
          data => {
              console.log('type of response ' + JSON.stringify(data));
              this.users = data;
              // tslint:disable-next-line:no-shadowed-variable
          },   (error: any) => {
              console.log('error', error);
          }
      );
      console.log('user list content: ' + this.users);
  }

deploy生成安卓app后，报错仍旧存在

尝试2

检查打包以后的浏览器response，
发现调用接口返回的竟然是ionic根目录上的index.html文件？！

这样，是可以解释通为什么json parse 会有unxpected < 了

那么怎么解决呢？

既然手动调用接口是通的， 那么问题肯定出在前端上

HttpClient会返回html的情况基本只有一个， 那就是服务器无响应

既然后台又是可以调通的， 那原因只有一个了， 一定是URL放错了

检查一看， 傻了

user.service.ts

    public findAll(): Observable {
        return this.httpclient.get('http://localhost:8080/users', {headers : headers
            });
    }

改成

user.service.ts

    public findAll(): Observable {
        return this.httpclient.get('http://192.168.0.104:8080/users', {headers : headers
            });
    }

嗯嗯，面壁.....

然后再打包，报了新错误，

XMLHttpRequest cannot load https://api.example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

跨域访问问题，在controller加上注释

@RestController
@CrossOrigin
Public class UserController {
...
}

成功

总结

开发中的基本， url跨域访问，header，处理返回值需要更熟练，这次栽在了json parse想当然得认为是json返回值不规范， 做了很多次改动， 而问题其实出在不太相干的细节上。