Angular 4不包含http請求的標頭

Question

我正在嘗試非常簡單的角度4 http請求。 當我檢查chrome開發人員工具時，我看不到http標頭。

const headers: Headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer: 123213');
this.http.post('https://127.0.0.1:502', JSON.stringify(token), {headers: headers}).subscribe();

我錯過了什么嗎？

Answer 1

從angular@5.x.開始angular@5.x. @angular/http模塊及其所有類都已棄用。 現在應該使用angular/common/http 。 在這里閱讀更多。

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

this.http.post(
   "http://localhost:3000/contacts",
   JSON.stringify({id: 4, name: 'some'}),
   httpOptions 
).subscribe();

對於舊版本，您可以這樣做：

import {Http, Headers, RequestOptions} from '@angular/http';

export class AppComponent {
    constructor(private http: Http) {
        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('authentication', `hello`);

       const options = new RequestOptions({headers: headers});
       this.http.post(
           "http://localhost:3000/contacts",
           JSON.stringify({id: 4, name: 'some'}),
           options
       ).subscribe();

你必須確保從@angular/http導入正確的對象：

import {Http, Headers, RequestOptions} from '@angular/http';

如果您仍然沒有看到標題，那么您使用的服務器也可能不允許它們。 當瀏覽器向另一個源發出請求時，它會發送access-control-headers-request標頭以檢查服務器是否允許自定義標頭。 如果您的服務器未配置為允許自定義標頭，則不會在后續請求中看到它們。

Answer 2

如果您使用HttpClient而不是Http，您的代碼應如下所示：

login(credintials: Authenticate): Observable<any> {

    const body = {
        username: credintials.username,
        password: credintials.password,
        grant_type: 'password',
        client_id: credintials.client_id
    };
    const headers = new HttpHeaders()
        .set('Content-Type', 'application/x-www-form-urlencoded')
        .set('Authorization', 'Basic loremlorem');

    return this.http.post(`${baseUrl}/uaa/oauth/token`,
        body,
        {
            headers: headers
        }
    );
}

如果您的參數是可選的，您應該添加這樣的參數：

let params: HttpParams = new HttpParams();
if (param) {
  params = params.append( 'page', param.page );
}

源代碼如下：

/**
 * Construct a new body with an appended value for the given parameter name.
 */
append(param: string, value: string): HttpParams;

Answer 3

把它

constructor(private http: Http) {
            this.headers = new Headers();
            this.headers.append('content-type', 'application/json');
    }

在這個方法里面

return this.http.post(url, jsonData, this.headers).map((resp: Response) => resp.json());

Answer 4

import { HttpClient,HttpHeaders } from '@angular/common/http';

const httpOptions = {headers：new HttpHeaders（{'Content-Type'：'application / x-www-form-urlencoded'}）};

“對於httppost”

this.httpClient.post('http://localhost/rajat/ajax/contact_query_submit/',{name:name,email:email,phone:phone,message:message},httpOptions)
.subscribe(data => {
  console.log(data);
});

“對於收到的帖子數據，你必須在下面提到這一點”

$postdata = file_get_contents("php://input");
        $_POST = json_decode($postdata,TRUE);
        $addArr = array(
            'name' => $this->input->post('name'),
            'email' => $this->input->post('email'),
            'phone' => $this->input->post('phone'),
            'message' => $this->input->post('message'),
            'created' => time()
        );