包含跨源 html 模板

Question

我正在尝试包含一个像这样带有角度的 html 模板

<div ng-include="http://SOME_OTHER_DOMAIN/template.html"></div>

如图所示，模板位于另一个域中，更具体地说，是在 s3 存储桶中。 我完全控制了这个存储桶，并且我已经应用了这样的 cors 配置。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
   <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

正如预期的那样，模板正确加载并通过检查网络流量 chrome 显示此响应标头：

access-control-allow-methods:GET
access-control-allow-origin:*
access-control-max-age:3000
content-encoding:gzip
content-type:text/html
........

现在奇怪的是，在没有任何修改或更改的情况下，模板停止加载并且浏览器抱怨请求中没有没有访问控制允许策略。事实上，当我再次检查网络时，CORS 标头丢失了。这是随机发生的，即使同时从 chrome 和 firefox 检查网站，一个浏览器会按预期找到 CORS，而另一个则不会。

我已经阅读了浏览器的同源策略和跨域资源共享 (CORS) 策略，但我发现这种行为很奇怪。

我想要您对此提出建议，这是否是浏览器问题、缓存相关、S3 错误或其他问题？

我找到了一些解决方案，其中涉及代理服务器，只是将 CORS 提供给没有的请求，但是为此保留一个服务器有点尴尬，更不用说 s3 已经默认实现了 CORS。

Answer 1

鉴于此故障的间歇性，我的猜测是浏览器已缓存您尝试加载的 html 文件，而此缓存版本未加载 CORS。

所以基本上 - 您是否在不通过 CORS 的情况下提前加载文件？然后跨域的第二个请求将需要它，但甚至永远不会离开浏览器，因为资源已被缓存。

您是否通过在浏览器中输入 url 直接在浏览器中加载模板文件（不是跨域请求，因为您是直接从存储桶中访问它）？

一个可能的解决方法是在模板的 url 中添加一个缓存破坏模式，这意味着浏览器无法缓存它，例如将?nocache 附加到模板网址的末尾。

看到这个答案：https://stackoverflow.com/a/14238351/808532

edit：另外，也许现在 Angular 可以在没有这个的情况下工作，但 url 字符串不应该在 ng-include 属性中单引号吗？

例如ng-include="'http://SOME_OTHER_DOMAIN/template.html'"