Это запрос ниже
this.http.post('http://localhost:8989/anchor_web_api/resources', this.resourceMap).subscribe(res => console.info(res));
и я хочу передать некоторые параметры в заголовке.
Как передать запрос заголовка, такой как авторизация или управление доступом между источниками, в указанном выше почтовом запросе
cors origin управляется на стороне сервера, а не на стороне клиента.
вам необходимо реализовать правильный ответ CORS на сервере, который вы вызываете, клиентское приложение ничего не может с этим поделать как добавить поддержку CORS на мой сервер





Вы можете сделать это,
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); }
);
}
Как я могу настроить контроль доступа на перекрестное происхождение с этим в заголовке
вам нужно сделать это на стороне сервера или в proxy.json
где этот файл proxy.json находится в моем угловом проекте.?
это не передняя часть, задняя часть, которая вам нужна для этой задачи
Вы можете использовать перехватчики для добавления токенов авторизации в свои заголовки. Вот ссылка, которая объясняет, как использовать перехватчики для записи заголовков -> 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);
Возможный дубликат Как добавить несколько заголовков в Angular 5 HttpInterceptor