Angular 6调用第三方API遇JSON解析错误，求解决方案

我来帮你拆解下这个问题——你遇到的SyntaxError: Unexpected token < in JSON at position 0，本质原因就是你代码里在尝试把HTML内容当成JSON来解析，这就难怪会报错了，毕竟HTML的开头基本都是<标签，完全不符合JSON格式。

你自己也提到接口返回的是context/type:text/html而非application/json，这说明第三方API返回的不是你需要的JSON数据，大概率是一个错误页面（比如404找不到资源、500服务器内部错误，或者需要权限的登录页面）。

下面是具体的解决步骤：

1. 先搞清楚API到底返回了什么 #

先修改你的service.ts代码，把响应的原始文本打印出来，这样你就能直观看到服务器给你的是什么内容：

export class VamosysService { 
  constructor(private _http:Http){} 
  getVechicalLocations():Observable<any[]>{ 
    return this._http.get(API_URL) 
      .pipe(
        // 先打印响应的基本信息
        tap(response => console.log('响应头信息:', response.headers)),
        // 打印响应的文本内容，看看是不是HTML页面
        tap(response => response.text().then(text => console.log('实际返回内容:', text))),
        map((response:Response)=><any[]>response.json())
      ); 
  } 
}

打开浏览器控制台，你就能看到实际返回的HTML代码，根据这个内容就能判断问题出在哪——是API地址写错了？还是需要加权限认证？或者第三方API本身就没返回JSON？

2. 针对性解决问题 #

• 如果是API地址错误：仔细核对API_URL的拼写，确认第三方API的端点是否有更新，有没有漏写路径参数或者域名错误。
• 如果是需要权限/认证：检查第三方API的文档，看看是否需要在请求头里添加Authorization令牌，或者是否需要其他身份验证参数。另外如果是浏览器端调用，还要确认是否存在跨域（CORS）问题，这时候需要第三方服务配置允许你的域名访问。
• 如果第三方API支持返回JSON：可以尝试在请求头里明确告诉服务器你需要JSON格式的响应，添加Accept: application/json头：

export class VamosysService { 
  constructor(private _http:Http){} 
  getVechicalLocations():Observable<any[]>{ 
    // 添加请求头，指定期望接收JSON
    const headers = new HttpHeaders().set('Accept', 'application/json');
    return this._http.get(API_URL, { headers }) 
      .pipe(map((response:Response)=><any[]>response.json())); 
  } 
}

3. 添加错误处理，避免程序崩溃 #

在订阅请求的时候加上错误处理逻辑，这样即使解析失败，也能捕获错误信息，不会直接导致程序崩溃：

export class VamosysComponent implements OnInit { 
  vechicalLocation:any[]; 
  constructor(private _vamoService:VamosysService) { } 
  ngOnInit() { 
    this._vamoService.getVechicalLocations() 
      .subscribe(
        (data) => this.vechicalLocation = data,
        (error) => {
          console.error('请求失败详情:', error);
          // 这里可以给用户显示友好的错误提示，比如"数据加载失败，请稍后重试"
        }
      ); 
  } 
}

总的来说，这个问题的核心就是你请求的API没有返回预期的JSON数据，先搞清楚返回的具体内容，再一步步针对性解决就好啦。

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