Impossible de définir content-type = application/json angular4 post demande

Question

J'essaie d'envoyer une demande de publication à l'aide de angularjs4. Le code fonctionne correctement lorsqu'il atteint la fonction login(). Notez que la fonction this.http.post, si je retire le dernier à savoir faire param look demande comme return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password }), l'en-tête de la demande sur le Web api devient:

POST /auth HTTP/1.1 
Host: localhost:8080 
Connection: keep-alive 
Content-Length: 39 
Pragma: no-cache 
Cache-Control: no-cache 
Accept: application/json, text/plain, */\* 
Origin: http://localhost:4200 
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 
content-type: text/plain 
Referer: http://localhost:4200/login 
Accept-Encoding: gzip, deflate, br 
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6 

Notez le content-type:text/plain qui est fixé par AngularJS par défaut. J'ai donc essayé d'ajouter { headers: head} de changer le content-type-application/json qui tourne en montre Invalid CORS request comme réponse et fait tourner la Request Header à:

Accept:*/\* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6 
Access-Control-Request-Headers:content-type 
Access-Control-Request-Method:POST 
Cache-Control:no-cache 
. 
. 

Remarquez la ligne Access-Control-Request-Headers:content-type, ce qui bien sûr est faux. est Ci-dessous le fichier d'autorisation qui déclenche la demande:

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

@Injectable() 
export class AuthenticationService { 
public token: string; 

constructor(private http: Http) { 

} 

login(username: string, password: string): Observable<boolean> { 
    let head = new Headers({ 'Content-Type': 'application/json' }); 
    return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password }),{ headers: head}) 
     .map((response: Response) => { 
      // login successful if there's a jwt token in the response 
      let token = response.json() && response.json().token; 
      console.log(response); 

     }); 
} 


} 

S'il vous plaît suggérer la bonne façon de changer le type de contenu à application/json en tête de demande dans la demande de poste via AngularJS 4

Answer 1

utilisation ci-dessous le code

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

@Injectable() 
export class AuthenticationService { 
public token: string; 

constructor(private http: Http) { 

} 

login(username: string, password: string): Observable<boolean> { 
    // let head = new Headers({ 'Content-Type': 'application/json' }); 
    const headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password }),options) 
     .map((response: Response) => { 
      // login successful if there's a jwt token in the response 
      let token = response.json() && response.json().token; 
      console.log(response); 

     }); 
} 


} 

Answer 2

Essayez ceci:

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

    @Injectable() 
    export class AuthenticationService { 
    public token: string; 

    constructor(private http: Http) { 

    } 

    login(username: string, password: string): Observable<boolean> { 
     let head = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: head }); 
     return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password }),options) 
      .map((response: Response) => { 
       // login successful if there's a jwt token in the response 
       let token = response.json() && response.json().token; 
       console.log(response); 

      }); 
    } 


    } 

Answer 3

Yo u devrait être en mesure d'utiliser un en-tête de cette façon:

let headers = new Headers({ 'Content-Type': 'application/json' }); 
headers.append('Accept', 'application/json'); 
let options = new RequestOptions({ headers: headers }); 

return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password }), options) 
    .map((response: Response) => { 
     // login successful if there's a jwt token in the response 
     let token = response.json() && response.json().token; 
     console.log(response);  
    }); 

Sinon, je crois que si vous utilisez la nouvelle HttpClient de @angular/common/http, l'application/JSON est le type de contenu par défaut.

E.g. - Tout d'abord importer la HttpClientModule:

// app.module.ts: 

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 

// Import HttpClientModule from @angular/common/http 
import {HttpClientModule} from '@angular/common/http'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    // Include it under 'imports' in your application module 
    // after BrowserModule. 
    HttpClientModule, 
    ], 
}) 
export class MyAppModule {} 

Ensuite, dans votre AuthenticationService:

constructor(private http: HttpClient) {} 

login(username: string, password: string): Observable<boolean> { 
    return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password })) 
     .map((response: Response) => { 
      // login successful if there's a jwt token in the response 
      let token = response.json() && response.json().token; 
      console.log(response);  
     }); 
} 

Des informations complémentaires sont disponibles dans le Angular Documentation.