Ionic登录页面调用API遇JSON解析错误，求助排查

Hi Tonye, 这个错误我太熟悉了——Unexpected token < in JSON at position 0 本质上是说你的前端代码在尝试解析JSON格式的响应，但API返回的却是HTML内容（比如服务器错误页面、404页面，这类内容的开头都是<标签）。咱们一步步来排查和解决：

1. 先确认API实际返回的内容 #

这是最关键的第一步，先搞清楚后端到底给你返回了什么：

• 打开浏览器的开发者工具（F12），切换到Network标签页；
• 点击登录按钮，找到对应的API请求（就是你拼接的get.php那个请求）；
• 查看Response面板里的内容，如果是HTML（比如Apache的404错误页、PHP语法错误提示页），那问题就出在后端接口上。
• 也可以直接在浏览器地址栏里输入你拼接好的完整URL（比如http://localhost:90/mySchool/api2/get.php?username=xxx@xxx.com&password=xxx），看看页面显示的是不是合法的JSON字符串。

2. 排查后端API的问题 #

如果返回的是HTML错误页，那后端大概率有问题：

• 检查get.php的语法：有没有遗漏分号、引号，或者函数调用错误？PHP运行出错时会输出带HTML格式的错误信息，这就会导致前端解析JSON失败。
• 确认参数名是否匹配：你前端传的参数是username和password，但后端接口是不是期望接收email和password？毕竟你前端绑定的是credentials.email，这里可能有参数名不匹配的问题。
• 确认get.php是否真的支持GET请求：有些后端接口可能只允许POST请求，用GET访问的话会返回错误页面。

3. 前端代码的优化与调试 #

即使后端没问题，前端的写法也有可以优化的地方，同时方便调试：

避免字符串拼接参数，用URLSearchParams处理 #

直接拼接URL参数容易出现编码问题（比如邮箱里的@、特殊字符），也有安全风险，建议改成：

// AuthService.ts
import { Injectable } from '@angular/core';
import { Http, Headers, Response, URLSearchParams } from '@angular/http';
import 'rxjs/add/operator/map';

let apiUrl = 'http://localhost:90/mySchool/api2/get.php';

@Injectable()
export class AuthService {
  constructor(public http: Http) {}

  login(credentials) {
    let params = new URLSearchParams();
    params.append('username', credentials.email); // 这里确认后端参数名是否正确，是不是应该用email？
    params.append('password', credentials.password);

    return this.http.get(apiUrl, { search: params })
      .map((response: Response) => {
        // 先打印返回内容，方便调试
        const responseText = response.text();
        console.log('API返回原始内容:', responseText);
        
        try {
          return JSON.parse(responseText);
        } catch (e) {
          console.error('解析JSON失败！返回内容不是合法JSON:', responseText);
          throw e; // 抛出错误让上层处理
        }
      });
  }
}

在登录方法中添加错误处理 #

在doLogin()里捕获错误，方便定位问题：

// 对应的组件.ts文件
doLogin() {
  this.authService.login(this.credentials)
    .subscribe(
      (data) => {
        console.log('登录成功，返回数据:', data);
        // 这里处理登录成功的逻辑
      },
      (error) => {
        console.error('登录请求失败:', error);
        // 给用户提示错误信息
      }
    );
}

4. 检查跨域问题（可选） #

如果你的Ionic前端运行在默认端口（比如8100），而后端在90端口，要确保后端已经配置了CORS（跨域资源共享）。如果没有配置，浏览器会拦截请求，返回的可能是跨域错误的HTML页面，同样会导致这个JSON解析错误。

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