无法设置 content-type = application/json 的 Angular4 POST 请求

Question

我正在尝试使用AngularJS4发送一个Post请求。当代码执行到login()函数时，它可以正常工作。请注意this.http.post函数，如果我删除最后一个参数，即使请求看起来像return this.http.post('http://localhost:8080/auth', JSON.stringify({ username: username, password: password })，那么Web 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 这一行是错误的。 下面是初始化请求的 Authorization 文件：

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 4中通过Post请求的请求头中将内容类型更改为application/json的正确方法。

- lazy rabbit

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

        });
}


}

- Anup pandey

Answer 2

您应该能够这样使用标题：

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，则application/json是默认的内容类型。

例如，首先导入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 {}

然后，在您的身份验证服务中：

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文档中获取，其中涉及IT技术相关内容。

- Zak

Answer 3

试试这个：

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

            });
    }


    }

- Melchia