Добавить заголовок для http-запросов, сделанных из html

Question

Я защитил свои конечные точки api, потребовав, чтобы они несли токен авторизации в заголовке запроса. Сервер гарантирует, что этот токен присутствует и действителен на каждой конечной точке. Все работает нормально для запросов, поступающих из кода клиента (Angular 2).

Но как насчет запросов, поступающих из html?

... 
<img src="api/Videos/{{video.id}}/thumbnail"> 
... 

Как я могу добавить заголовок авторизации для этих запросов? Это приложение Angular 2, поэтому, возможно, существует несколько решений.

Answer 1

Не уверен, если это то, что вы имеете в виду, но вы можете создать службу для извлечения необходимых данных (из запроса HTTP),

getData() : Observable<Model[]> { 
    // ...using get request 
    return this.http.get(this.url) 
      // ...and calling .json() on the response to return data 
      .map((res:Response) => res.json()) 
      //...errors if any 
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
} 

и ваша модель

export class Model { 
constructor(
    public id: string, 
    public imagePath: string 
    //other properties that you might need.. 
    ){} 

}

тогда вы должны только связать свойство Src как

<img class="img-responsive" src="{{model.imagePath}}" style="max-height: 50px;"/> 

Обратите внимание, что вы можете добавить заголовки к вашему запросу, как что

let headers = new Headers({ 'Content-Type': 'application/json' }); 
let options = new RequestOptions({ headers: headers }); // Create a request option 

, а затем

return this.http.get(url, { 
    headers: headers 
});