Angular 5异常：服务器返回200状态却触发catchError，无法显示响应值

嘿，这个问题我之前也踩过坑！本质是Angular HttpClient的默认行为和你的后端响应格式不匹配导致的——哪怕服务器返回200状态码，响应解析失败照样会触发错误处理逻辑。

为什么会触发catchError？ #

• Angular的HttpClient.get()默认期望响应是JSON格式，它会自动尝试把响应体解析成JSON对象。
• 你的后端设置了produces = "text/plain"，返回的是纯字符串"my response"——这不是有效的JSON（有效的JSON字符串需要用双引号包裹，比如"\"my response\""）。
• 当HttpClient尝试把纯文本解析成JSON时，会直接抛出解析错误，这时候就会进入catchError流程，哪怕HTTP状态码是200。你看到的日志Backend returned code 200, body was: [object Object]就是解析失败后，错误对象里的相关信息。

两种解决方案 #

方案1：修改后端，返回JSON格式 #

如果后端可以调整，把返回的内容改成有效的JSON格式即可，Spring会自动处理序列化：

@RequestMapping(value = "/test", method = RequestMethod.GET, produces = "application/json")
public String testApi(HttpServletRequest request) {
    System.out.println("in /test");
    // 用双引号包裹字符串，让它成为有效的JSON字符串
    String response = "\"my response\"";
    return response;
    // 或者更优雅的方式：直接返回对象，Spring会自动转成JSON
    // return new ResponseEntity<>("my response", HttpStatus.OK);
}

方案2：修改Angular服务，指定响应类型为纯文本 #

如果后端不能改，就在Angular的请求里明确告诉HttpClient不要解析JSON，直接处理纯文本：

@Injectable()
export class MyService {
    private url = 'http://localhost:5000/myproj/api/test';
    constructor(private http: HttpClient) { }

    getData(): Observable<string> {
        console.log("in getData() method");
        // 添加{ responseType: 'text' }配置项
        return this.http.get<string>(this.url, { responseType: 'text' })
            .pipe(
                catchError(this.handleError)
            );
    }

    // 错误处理逻辑保持不变
    private handleError(error: HttpErrorResponse) {
        if (error.error instanceof ErrorEvent) {
            console.error('An error occurred:', error.error.message);
        } else {
            console.error(
                `Backend returned code ${error.status}, ` +
                `body was: ${error.error}`);
        }
        return new ErrorObservable('Something went wrong; please try again later.');
    };
}

额外小提示 #

你的组件代码里还有个异步相关的小问题：

testCall() {
    this.myService.getData().subscribe(data => this.data = data);
    console.log("Data: " + this.data); // 这里会打印undefined！
}

因为subscribe是异步操作，日志会在服务器返回数据之前执行，所以拿不到值。应该把日志放在回调函数里：

testCall() {
    this.myService.getData().subscribe(data => {
        this.data = data;
        console.log("Data: " + this.data); // 这里才能拿到正确的数据
    });
}

内容的提问来源于stack exchange，提问作者Kingamere