记录web踩过的坑
情景：
Angular 前台向Java springboot的后台请求一组List<User>
JAVA UserController返回一组List<User> ：
UserController.java
@RestController
public class UserController {
..
@GetMapping("/users")
public List getUsers(){
return userRepository.findAll();
}
..
}
Angular前台调用接口
user.service.ts
public findAll(): Observable<User[]> {
return this.httpclient.get<User[]>('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文件？！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HoStream</title>
<base href="/"/>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="description" content="HoStream live streaming LHS">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/png" href="assets/icon/favicon.png">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4F24AC">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
这样，是可以解释通为什么json parse 会有unxpected < 了
那么怎么解决呢？
既然手动调用接口是通的， 那么问题肯定出在前端上
HttpClient会返回html的情况基本只有一个， 那就是服务器无响应
既然后台又是可以调通的， 那原因只有一个了， 一定是URL放错了
检查一看， 傻了
user.service.ts
public findAll(): Observable<User[]> {
return this.httpclient.get<User[]>('http://localhost:8080/users', {headers : headers
});
}
改成
user.service.ts
public findAll(): Observable<User[]> {
return this.httpclient.get<User[]>('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返回值不规范， 做了很多次改动， 而问题其实出在不太相干的细节上。
网友评论