Как сделать POST-запрос в угловых 5

Question

Это запрос ниже

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

, и я хочу передать некоторые параметры в заголовке.

Как передать запрос заголовка, такой как Авторизация или контроль доступа между источниками в вышеуказанном почтовом запросе

Answer 1

Вы должны создать класс-перехватчик для передачи заголовков авторизации во всех 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);

Answer 2

Давайте начнем с инструкций для Прокси для Бэкэнда с 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

Райан Ченки имееттехнический блог на 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')
;

и в своем HTTP-запросе, используя HttpClient,добавьте заголовки к объектному параметру 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 3

Вы можете использовать перехватчики для добавления токенов авторизации в ваши заголовки. Вот ссылка, которая объясняет, как использовать перехватчики для записи заголовков -> Перехватчики Http , а вот Angular Документация

Answer 4

Чтобы использовать токены авторизации, самый простой и правильный способ - использовать перехватчики .

Вы можете хранить свой токен в локальном хранилище и устанавливать его для отправки при каждом запросе:

localStorage.setItem('token', response.access_token);

Пожалуйста, прочитайте этот ответ , чтобы узнать, какустановить токен перехватчик и как его использовать.

Answer 5

Вы можете сделать это,

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