記錄web踩過(guò)的坑
情景：
Angular 前臺(tái)向Java springboot的后臺(tái)請(qǐng)求一組List<User>
JAVA UserController返回一組List<User> ：
UserController.java
@RestController
public class UserController {
..
@GetMapping("/users")
public List getUsers(){
return userRepository.findAll();
}
..
}
Angular前臺(tái)調(diào)用接口
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后， 發(fā)現(xiàn)調(diào)用接口的頁(yè)面報(bào)錯(cuò)
Uncaught SyntaxError: Unexpected token < in JSON at position 1
排查錯(cuò)誤
嘗試1： json返回值格式錯(cuò)誤
因?yàn)殄e(cuò)誤是Json.parse, 首先想到的是服務(wù)器返回的數(shù)據(jù)格式不對(duì)
嘗試解決辦法
ionic generate class User
//創(chuàng)建class
export class User {
id: number;
lastname: string;
firstname: string;
password: string;
email: string;
}
然后在使用userservice的頁(yè)面挺狰， 把原本的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后刃永，報(bào)錯(cuò)仍舊存在
嘗試2
檢查打包以后的瀏覽器response谦疾，
發(fā)現(xiàn)調(diào)用接口返回的竟然是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 會(huì)有unxpected < 了
那么怎么解決呢艘狭？
既然手動(dòng)調(diào)用接口是通的， 那么問題肯定出在前端上
HttpClient會(huì)返回html的情況基本只有一個(gè)， 那就是服務(wù)器無(wú)響應(yīng)
既然后臺(tái)又是可以調(diào)通的巢音， 那原因只有一個(gè)了遵倦， 一定是URL放錯(cuò)了
檢查一看， 傻了
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
});
}
嗯嗯官撼，面壁.....
然后再打包梧躺，報(bào)了新錯(cuò)誤，
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 {
...
}
成功
總結(jié)
開發(fā)中的基本掠哥， url跨域訪問，header秃诵，處理返回值需要更熟練续搀，這次栽在了json parse想當(dāng)然得認(rèn)為是json返回值不規(guī)范， 做了很多次改動(dòng)菠净， 而問題其實(shí)出在不太相干的細(xì)節(jié)上禁舷。
