我有一个基于angularjs的JS/HTML5项目,我使用http头中设置的授权令牌来保护api.现在我还想保护从服务器访问图像.
我知道如何在服务器端执行此操作,但如何在angular或javascript中为图像请求添加HTTP标头？对于api请求,我们已经将它添加到服务($ ressource)并且它可以工作.
在html视图中,图像显示如下:
<img ng-src="{{element.image.url}}">
element.image.url指向一个网址:/rest_api/img/12345678.
这工作正常,显示图像.
现在,我添加身份验证:
在对用户进行身份验证之前,每个资源都会响应一个http错误401,图像也是如此.验证成功后,会将令牌放在自定义标头中,并与每个$ http请求一起发送,以允许访问资源:
$http.defaults.headers.common['Authorization'] = token;
这适用于加载$ resource的Json文件.但是在认证之后,到图像的直接链接仍然是401.
如何使用自定义标题调用图像？
或者关于我应该怎么做的任何建议.
我有一个Ionic应用程序,它从远程服务器获取数据并将其显示在Ionic html页面上.
远程URL将如下所示:
这将给我一个"内容"的JSON对象,并将在Ionic应用程序的html页面中进一步使用.
在Ionic app里面的html页面上使用它是这样的:
<div class="article-desc">
<p [innerHtml]="myObject?.Body"></p>
</div>
"myObject"是从服务器收到的响应的JSON对象.
"正文"字段包含要在段落中显示的HTML.此"HTML"字段仅与整个"内容"对象一起从服务器返回.
"Body"字段可以包含以下内容:
<p>blah blah <img src="http://foo.com/image/1"/> blah blah <img src="http://foo.com/image/2"/>blah blah blah </p>
您可以从上面的示例中看到该图像存在于该html中.
我没有问题将该字段中的html呈现给Ionic Page.
我有一个问题是我的图像没有在那里呈现.
这就是为什么..
我的应用程序已被访客用户锁定,因此对于每个请求,我需要发送一个Authorization标头以对其进行身份验证,在这种情况下,所有图像都无法呈现,因为每个图像请求都将被视为服务器的访客.
你能建议一个常见的地方,我的所有图像和hmtl中的其他来源都应该通过,并可以将授权标题随之发送到服务器.
我已在本地存储项中拥有授权令牌.
我的目标是在Ionic应用程序中呈现时,在该Body字段中出现的每个外部源(此处为图像)发送授权标头.
我在JS中加载一个像这样的图像:
var img = new Image();
img.onload = function () {
..
};
img.src = src;
这将有效,但我已经意识到我必须使用OAuth 2在服务器端保护我的图像(与应用程序的其余部分一样),这将在我看来只是收到401 Unauthorized.
这是一个角度应用程序,我确实有一个拦截器,因此为服务器的所有角度服务请求添加了Authorization标头,但在这种情况下 - 当然不使用拦截器,因为调用不是在角度上下文中进行的.
有关如何将Authorization标头添加到get请求的任何想法？