2017-12-30 78 views
3
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) 

내가이 오류를 가지고 양식을 추가 할에서 위치 0에서 JSON에서 예기치 않은 토큰 <모든 사람이 알고 왜구문 에러 :

**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> 

@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()); 
     } 
0,123,516 User.service
+3

확인하여 응답이 머리를 변경해야합니다. – Yoshi

+0

그래, 당신이 받고있는 것은 JSON이 아니기 때문에 오류 일 가능성이 높습니다. – Alex

+0

우편 배달부에서이 correctely 토큰과 인증을 보낼 수 있지만, 각 JS에서 나는이 오류 "구문 에러 :에서 위치 0에서 JSON에서 예기치 않은 토큰 <"했기 때문에 난 @ AJT_82 내 JSON을 확인할 수있는 방법을 개발 도구에서 응답 탭을 확인 – helen

답변

0

문제는 content-type입니다. HTML 컨텐트를 보내지는 않지만 컨텐트 유형에 JSON이라는 컨텐트 유형이 있습니다.

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

당신은 좀 HTML 오류 페이지에 셨을 텐데요, 정확한 하나의