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

将标头添加到html中的http请求中

1 个答案: