Question

这是以下请求

this.http.post('http://localhost:8989/anchor_web_api/resources', this.resourceMap).subscribe(res => console.log(res));

我想在标题中传递一些参数。

如何在上述帖子请求中传递头像请求，如授权或跨源访问控制

Answer 1

你可以这样做，

    var headers = new Headers();
    this.createAuthorizationHeader(headers);
    headers.append('Content-Type', 'application/json');
     return this.http.post(
      'http://localhost:8989/anchor_web_api/resources', this.resourceMap, {
        headers: headers
      }).map(res => res)).subscribe(
        data => { console.log(data); },
        err => { console.log(err); }
      );
 }

Answer 2

您可以使用拦截器将授权令牌添加到标题中。这是一个解释如何使用拦截器来编写标题的链接 - ＆gt; Http Interceptors这里是Angular Documentation

Answer 3

为了使用授权令牌，最简单正确的方法是使用interceptors。

您可以将令牌保存在本地存储中，并将其设置为随每个请求一起发送：

- name: Capturing the Data flow
    shell: tcpdump -v -U -i eth1 host 8.8.8.8 -w /tmp/temhost.pcap
    become: yes
    async: 60
    poll: 0

请阅读this answer以了解如何设置令牌拦截器以及如何使用它。

Answer 4

让我们从Proxy to the Backend与proxy.conf.json的说明开始。它通常在Angular项目结构的根目录下创建。

// proxy.config.json sample
{
  "/api/": {
    "target": {
      "host": "localhost",
      "protocol": "http:",
      "port": 3000
    },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "info"
  }
}

然后，当您使用Angular / CLI时，您可以通过以下方式调用它：

ng serve  --proxy-config proxy.conf.json

Ryan Chenkie在Interceptors上为Angular 5提供了一个技术博客，但您可以使用headers中的HttpHeaders创建HttpService：

headers = new HttpHeaders().set('Content-Type', 'application/json');

OR

token = `Bearer ${localStorage.getItem('access_token')}`;
headers = new HttpHeaders()
  .set('Authorization', this.token)
  .set('Content-Type', 'application/json')
  .set('X-CustomHeader', 'custom header value')
  .set('X-CustomHeader2', 'custom header2 value')
;

并在使用HttpClient的HTTP请求中，将标头添加到headers对象选项，如下所示，使用RxJS do加入数据流：

this._httpClient.post('url/to/api', { headers: this.headers })
    .do(data => console.log(data))
;

或使用以下内容直接访问您的组件：

this._httpClient.post('url/to/api', { headers: this.headers })
    .subscribe(data => console.log(data));

Answer 5

您必须创建拦截器类以在所有API中传递授权头。您无需为每个请求设置授权标头。

RouteHttpInterceptor类文件

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
import {AuthService} from '../services/auth.service';

@Injectable({
    providedIn: 'root'
})

export class RouteHttpInterceptor implements HttpInterceptor {

constructor(private auth: AuthService) {
}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (this.auth.token !== null) {
        return next.handle(request.clone({
            setHeaders: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + this.auth.token
            }
        }));
    }

    return next.handle(request);
    }
}

发送参数并在帖子请求中设置标题

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

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

const url = 'yourapi';
return this.http.post(url, {
    key: 'value',
    key1: 'value1'
},httpOptions);

如何在角度5中发出POST请求

5 个答案: