无法设置content-type = application/json angular4发布请求

Question

我正在尝试使用angularjs4发送发布请求。代码在达到login()函数时工作正常。注意this.http.post功能，如果我删除最后PARAM即作出要求样子return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password })，然后在网页API请求头变为：

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 

注意这是由angularjs默认设置的content-type:text/plain。所以我尝试添加{ headers: head}改变content-type到application/json这在原来节目Invalid CORS request为响应和转向的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 
. 
. 

通知的Access-Control-Request-Headers:content-type线，这当然是错误的。 下面是授权文件，启动请求：

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); 

     }); 
} 


} 

请建议通过AngularJS内容类型更改为application/json在请求头中的POST请求4

Answer 1

使用下面的代码

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

试试这个：

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

呦ü应该能够以这种方式使用的标题：

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);  
    }); 

另外，我相信，如果你使用来自@angular/common/http较新的HttpClient，应用/ JSON是默认的内容类型。

E.g. - 首先导入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 {} 

然后，在你的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);  
     }); 
} 

更多信息，在Angular Documentation可用。