我正在使用Angular开发单页应用程序。后端提供需要基本认证的REST服务。获取index.html或任何脚本都不需要认证。
我遇到了一个奇怪的情况,在我的一个视图中有一张<img>
,其中src
是需要认证的REST API的URL。浏览器处理<img>
,我无法为它发出的GET请求设置授权头,这导致浏览器提示要求输入凭据。
我尝试通过以下方式修复此问题:
- 在源代码中将
img src
留空 - 在“文档就绪”时,使用授权头发出
XMLHttpRequest
请求到一个服务(/api/login
),只是为了进行身份验证。 - 完成该调用后,设置
img src
属性,认为此时浏览器会知道在后续请求中包括授权头...
...但它没有。图像的请求被发送而不带头信息。如果我输入凭据,那么页面上的所有其他图像都正确。
我有两个问题:
- 为什么浏览器(IE10)不在成功的
XMLHttpRequest
之后的所有请求中包括头信息? - 我该怎么解决这个问题?
@bergi要求提供请求的详细信息。下面是它们。
请求/api/login
GET https://myserver/dev30281_WebServices/api/login HTTP/1.1
Accept: */*
Authorization: Basic <header here>
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)
Connection: Keep-Alive
响应 (/api/login)
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Length: 4
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 20 Dec 2013 14:44:52 GMT
请求 /user/picture/2218:
GET https://myserver/dev30281_WebServices/api/user/picture/2218 HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)
Connection: Keep-Alive
接着,网络浏览器会提示输入凭据。如果我输入了凭据,就会得到如下响应:
HTTP/1.1 200 OK
Cache-Control: public, max-age=60
Content-Length: 3119
Content-Type: image/png
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 20 Dec 2013 14:50:17 GMT
http://user:pass@server/path/to/img.png
? - quietmintXMLHttpRequest
中),并且保持“隐藏不可见”? - Khanh TO<img src="user:pass@server/1x1.gif">
。可以通过脚本动态添加,然后在加载完成后立即删除,甚至更好的是使用visibility: hidden
或等效方式。 - matpop