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。 / p>

Answer 1

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

基本上 - 你是否先加载文件而不通过CORS？然后是跨域的第二个请求需要它，但是从不离开浏览器，因为资源已经被缓存了。

您是否直接在浏览器中输入模板文件，方法是输入网址（不是跨域请求，因为您直接从其存储桶中访问）？

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

请参阅此答案：https://stackoverflow.com/a/14238351/808532

编辑：此外，也许现在有角度的工作没有这个，但是不应该在你的ng-include属性中单引号的url字符串？

e.g。 ng-include="'http://SOME_OTHER_DOMAIN/template.html'"

包含交叉原始html模板

1 个答案: