带有 Safari 的 HTML5 appcache 导致跨站点 css 无法加载答案

【问题标题】：HTML5 appcache with Safari causing cross site css not to load带有 Safari 的 HTML5 appcache 导致跨站点 css 无法加载
【发布时间】：2015-09-28 12:53:07
【问题描述】：

我的一个网页出现了问题，该网页已更改为使用 HTML5 appcache 功能。当在页面上启用 appcache 时，Safari 会阻止我的跨站点 css 文件。该页面http://www.ericperrets.info/ 从我的服务器加载了一些图像/css 文件，并从 google url/servers 加载了一些 css 文件。下面是epi.appcache文件内容

CACHE MANIFEST
#v2

CACHE:
default.css
/images/bg.gif
/images/bg2.gif
/images/external.png
/images/logo.gif
/images/mail_48.png
/images/meme.jpg
/images/pdficon.gif
/images/telephone_32.png
/favicon.ico
/js/dojo/dojo/dojo.js

NETWORK:
Resume%20-%20Eric%20Perret.pdf
index.html

当页面在 Firefox 中加载时可以找到，但是当我尝试在 Safari 中加载它时，它会阻止对 http://fonts.googleapis.com/css?family=Reenie+Beanie&v1 和 http://fonts.googleapis.com/css?family=Candal&v1 的调用被消息阻止

网址无法显示

不知道为什么会这样。

【问题讨论】：

提到的两个文件都具有私有缓存控制，这意味着它应该只缓存在用户浏览器中（而不是公共代理等）。这和你的问题有关系吗？
@Jonas，不知道为什么 Google 使用 Cache-Controle: private 作为 CSS 文件，使用 'Cache-Controle: public` 作为字体，但这不是我网站的问题。我没有明确说明所有其他 http 内容都应该来自网络的行更长。
他们使用 cache-controle private 因为希望为不同的浏览器提供不同的 css 文件。代理应该使用缓存文件发送给其他用户，可能还有其他浏览器。

标签： css html safari manifest

【解决方案1】：

浏览器使用定义的应用缓存来指定您网站上存在的与浏览器正在访问的特定页面相关的文件。将 appcache 想象成一个白名单，它列出了所有可以访问的文件以及应该如何访问它们。

因此，当 Safari（根据我的经验，它比 Firefox 更严格地遵循 AppCache 标准）看到对不在 AppCache 中的网址的请求时，它不允许访问。

要解决此问题，您可以将资源添加到缓存部分或网络部分。在我看来，更好的选择是在网络部分使用通配符“*”路径来确保请求不会被阻止。

NETWORK:
*
http://*
https://*

【讨论】：

这对我来说非常有效。我最终使用的是... CACHE MANIFEST #v3 CACHE: /default.css /images/bg.gif /images/bg2.gif /images/external.png /images/logo.gif /images/mail_48.png /images/meme.jpg /images/pdficon.gif /images/telephone_32.png /favicon.ico /js/dojo/dojo/dojo.js NETWORK: /Resume%20-%20Eric%20Perret.pdf /index.html * http://* https://*