在标头 GET 方法中发送令牌

Question

有一个站点和一个 web api。我从 web api 服务器收到的所有文件。

我在网站上有 ADFS OAUTH2 授权。 我需要使用身份验证令牌从 web api 获取图像。

所以现在我做这样的事情：

<img src='webApiUrl/Photo/Id?token=token_value' alt />

但是我有一个关于令牌长度的错误。对于某些客户来说，时间很长，我无法控制。 我可以使用 xhr 请求发送授权标头，但我不明白如何为通过 src 从 html 请求资源的站点设置授权标头。

你能帮我解决它吗？

Answer 1

只要您有一个对 Web API 的 HTTP 请求，您就可以使用 Angular 拦截器将您的令牌放在请求标头上。这里我选择演示 Bearer 认证。像这样：

appName.config(["$httpProvider", ($httpProvider: ng.IHttpProvider) => {
                $httpProvider.interceptors.push(<any>["$q", "$location",
                    ($q: ng.IQService, $location: ng.ILocationService) => {
                        return {

                     // config is the request data, including all its properties
                            'request': (config) => {

                               // Intercepting only the API requests
                                if (config.url.indexOf(apiServerUrl) >= 0) {

                               // Getting the token from local storage for example
                                    var token = localStorage.getItem("token"); 

                               // Placing the token in the right header                                        
                                   if (token)
                                     config.headers["Authorization"] = "Bearer " + token; 
                                }
                                return config;
                            }
                        }
                    }
                ]);
            }]);

Answer 2

也许这会解决你的问题：http://blog.jsgoupil.com/request-image-files-with-angular-2-and-an-bearer-access-token/

它涉及注册管道，以便您可以将安全的src 属性与img 标签一起使用。