Question

add-user.component.ts:30 SyntaxError: Unexpected token < in JSON at position 0
    at Object.parse (<anonymous>)
    at Response.webpackJsonp.../../../http/@angular/http.es5.js.Body.json (http.es5.js:797)
    at MapSubscriber.project (user.service.ts:34)
    at MapSubscriber.webpackJsonp.../../../../rxjs/operators/map.js.MapSubscriber._next (map.js:79)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:90)
    at XMLHttpRequest.onLoad (http.es5.js:1226)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:188)

当我想添加一个表单时我有这个错误任何人都知道为什么

**add.components.ts**

import { Component, OnInit } from '@angular/core';
import {UserService} from '../user.service';
import {Router} from '@angular/router';
import { User } from '../User';



@Component({
  selector: 'app-add-user',
  templateUrl: './add-user.component.html',
  styleUrls: ['./add-user.component.css']
})
export class AddUserComponent implements OnInit {

 user:User=new User();

 errors=[];


  constructor(public userService:UserService, private router: Router) { }


  ngOnInit() {
  }

  saveContact(){
    this.userService.saveContact(this.user)
      .subscribe(
        data => console.log(data),
        error => console.error(error)
    );

        }
      }

形式

<form class="well">

  <div class="form-group">
    <label>username:</label>
    <input type="text" class="form-control" placeholder="add username"   [(ngModel)]="username" name="username" >
  </div>

  <div class="form-group">
    <label>Email:</label>
    <input type="text" class="form-control" placeholder="add email"  [(ngModel)]="email" name="email" >
  </div>



      <div *ngFor="let error of errors" class="alert alert-danger">
          <div>There is an error in :{{error.field}} field</div>
          <div>{{error.message}}</div>
        </div>

  <button  class="btn btn-primary"  (click)="saveContact()" >Save</button>

</form>

User.service

@Injectable()
export class UserService {

  private uri= 'http://127.0.0.1:8000/api/users';


     constructor(private http: Http, private authenticationService: AuthService  ) {}


      getUsers(): Observable<any[]> {
        const headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token });
        return  this.http.get(this.uri , {headers : headers}).map(res => <User[]> res.json() )
        .catch(this.handelError);

      }



      saveContact(user: User) {
        const  headers = new Headers();
        headers.append('content-type', 'application/json');
        headers.append('Authorization', 'Bearer ' + this.authenticationService.token);
        return this.http.post(this.uri, JSON.stringify(user), {headers : headers})
        .map(response => response.json());
      }

Answer 1

问题是内容类型。您没有发送HTML内容，但在您的内容类型中，您说您的内容是JSON。

headers.append('content-type', 'application/json');

你应该用准确的一个改变这个头

SyntaxError：意外的令牌＆lt;在JSON的0号位置

1 个答案: