Как сделать запрос POST в angular 5

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

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

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

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

Возможный дубликат Как добавить несколько заголовков в Angular 5 HttpInterceptor

Ashish Kadam 31.05.2018 07:28

cors origin управляется на стороне сервера, а не на стороне клиента.

Ashish Kadam 31.05.2018 07:30

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

Vikas 31.05.2018 08:37
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
3
2 161
5

Ответы 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.info(data); },
        err => { console.info(err); }
      );
 }

Как я могу настроить контроль доступа на перекрестное происхождение с этим в заголовке

Braj Ankit 31.05.2018 06:07

вам нужно сделать это на стороне сервера или в proxy.json

Sajeetharan 31.05.2018 06:07

где этот файл proxy.json находится в моем угловом проекте.?

Braj Ankit 31.05.2018 06:09

это не передняя часть, задняя часть, которая вам нужна для этой задачи

HD.. 31.05.2018 08:04

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

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

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

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

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

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

У Райана Ченки есть технический блог о Перехватчики для 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.info(data))
;

Или получите доступ прямо в своем компоненте, используя следующую команду:

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

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

Другие вопросы по теме