SyntaxError：意外的令牌 < 在 JSON 中的位置 1 离子答案

【问题标题】：SyntaxError: Unexpected token < in JSON at position 1 ionicSyntaxError：意外的令牌 < 在 JSON 中的位置 1 离子
【发布时间】：2018-02-17 10:57:52
【问题描述】：

我该如何解决这个问题？请你帮助我好吗。谢谢你。我遇到了一个类似的错误，结果证明是渲染函数中的 HTML 中的错字，但这里似乎不是这种情况。

更令人困惑的是，我将代码回滚到更早的已知工作版本，但我仍然收到错误。

错误信息；

SyntaxError: Unexpected token < in JSON at position 1
        at JSON.parse (<anonymous>)
        at Response.Body.json (http://localhost:8100/build/vendor.js:67304:25)
        at SafeSubscriber._next (http://localhost:8100/build/main.js:358:29)
        at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/vendor.js:32821:16)
        at SafeSubscriber.next (http://localhost:8100/build/vendor.js:32768:22)
        at Subscriber._next (http://localhost:8100/build/vendor.js:32708:26)
        at Subscriber.next (http://localhost:8100/build/vendor.js:32672:18)
        at XMLHttpRequest.onLoad (http://localhost:8100/build/vendor.js:67797:38)
        at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
        at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4973:33)

providers/auth-service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

let apiUrl = "http://localhost/PHP-Slim-Restful/api/";


@Injectable()
export class AuthServiceProvider {

  constructor(public http: Http) {
    console.log('Hello AuthService Provider');
  }

  postData(credentials, type){

    return new Promise((resolve, reject) =>{
      let headers = new Headers();
      this.http.post(apiUrl+type, JSON.stringify(credentials), {headers: headers}).
      subscribe(res =>{
        resolve(res.json());
      }, (err) =>{
        reject(err);
      });

    });

  }

}

import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { TabsPage } from '../tabs/tabs';
    import { LoginPage } from '../login/login';
    import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
    import 'rxjs/add/operator/map';

@IonicPage()
@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html',
})
export class SignupPage {
  responseData: any;
  userData = { "username": "", "password": "", "email": "", "name": "" };
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public authService: AuthServiceProvider) {
  }

  ionViewDidLoad() {

  }
  signup() {
    //api connections

    this.authService.postData(this.userData, "signup")
      .then((result) => {
        this.responseData = result;
        console.log(this.responseData);
        localStorage.setItem('userData', JSON.stringify(this.responseData))
        this.navCtrl.push(TabsPage);
      }, (err) => {

        //connection failed message
      });
  }
  login() {
    this.navCtrl.push(LoginPage);
  }
}

<!--
  Generated template for the SignupPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Kayıt OL</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label floating>Adınız</ion-label>
      <ion-input type="text" [(ngModel)]="userData.name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Mail Adresiniz</ion-label>
      <ion-input type="text" [(ngModel)]="userData.email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Kullanıcı Adı</ion-label>
      <ion-input type="text" [(ngModel)]="userData.username"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Şifre</ion-label>
      <ion-input type="password" [(ngModel)]="userData.password"></ion-input>
    </ion-item>

  </ion-list>

  <div padding>
    <button ion-button block (click)="signup()">Üye Ol</button>
  <a href="#" (click)="login()">Login Page</a>
  </div>
</ion-content>

【问题讨论】：

先尝试控制台记录响应
用一个rest客户端测试你的api

标签： json angular ionic-framework

【解决方案1】：

100% 此错误是由于 api 响应错误，请检查您的 api 响应到日志中

【讨论】：

【解决方案2】：

从 api 文件夹，在index.php 中，只需删除或注释此行“echo $email_check.'<br/>'.$email;”在第 83 位而这一行“echo ' Here';”在第 87 位

理由： signup.ts 文件中 localStorage.setItem 的第二个参数必须是 JSON 格式但是 api 发送

"<br/>email@gmail.comhere{"userData": {"user_id":"4","name":"My Name here",
"email":email@gmail.com","username":"myusernamehere",
"token":"c0045c0d75e48f62919b1c0d16461af854049615df2c0d9a7bd755e9679e662a"}}"

而且这不是json格式

对我来说很好用

【讨论】：