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/http模块的所有类都已弃用。现在应该使用angular/common/http。 Read here了解更多信息。

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

把这个

elementsEqual

并在方法内部

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

Answer 4

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

const httpOptions = { 标头：新的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()
        );

Angular 4不包含http请求的标头

4 个答案: