Angular 5应用调用API后仅Safari出现TypeError错误求助

我之前也碰到过类似Safari和Angular HTTP错误处理的兼容性问题，给你几个实用的排查和解决思路：

1. 强制指定响应类型，避免JSON解析失败 #

Safari对HTTP错误响应的解析比Chrome更严格——如果服务器返回4xx/5xx错误时响应体为空或者格式不符合JSON规范，Angular的HttpClient自动尝试解析JSON就会抛出TypeError。而Chrome会更宽容地处理这种情况。

你可以在请求配置里强制指定responseType: 'text'，跳过自动JSON解析：

const baseUrl = environment.apiUrl; 
const fullUrl = baseUrl + '/productname/v1.0/validation/access-token'; 
const headers = new HttpHeaders({ 'X-Access-Token': access_token }); 

this.http.get(fullUrl, { 
  headers: headers,
  responseType: 'text' // 新增：强制以文本格式接收响应
}).subscribe((res: any) => { 
  console.log(res, 'http res'); 
}, (error: any) => { 
  console.log(error, 'http err'); 
});

如果错误响应确实是JSON格式，你可以在错误回调里手动解析：

(error: any) => {
  try {
    const errorJson = JSON.parse(error.error);
    console.log(errorJson, 'parsed error');
  } catch (e) {
    console.log(error, 'raw error');
  }
}

2. 使用RxJS的catchError增强错误处理稳定性 #

Angular 5搭配的RxJS版本在Safari的错误流处理上可能存在兼容性问题，改用catchError操作符包裹错误处理逻辑，能更稳定地捕获错误，避免应用崩溃：

import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

// ...

this.http.get(fullUrl, { headers: headers })
  .pipe(
    catchError((error: any) => {
      console.log(error, 'http err');
      return of(null); // 返回空Observable，避免流中断导致的崩溃
    })
  )
  .subscribe((res: any) => {
    console.log(res, 'http res');
  });

3. 检查服务器的错误响应头配置 #

确保服务器返回4xx错误时，响应头设置正确：

• 如果有响应体，Content-Type需匹配实际格式（比如application/json）
• 如果是空响应，添加Content-Length: 0头，避免Safari因解析空响应出错

4. 升级Angular/RxJS补丁版本 #

Angular 5是比较老的版本，官方后续发布的补丁可能修复了部分浏览器兼容性问题。可以尝试升级到Angular 5.x的最新补丁版本，以及对应的RxJS兼容版本，看看是否能解决问题。

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