cors - 我的 CSS 无法加载位于其他 https+auth 服务器上的 web 字体 woff 文件(与 CORS 相关)

Question

我的 CSS 托管在 https://www.site1.com(它是一个经过身份验证的域)上，它使用位于 https://media.site1.com 上的 woff/ttf 文件(它也经过身份验证 - 与 www 相同的身份验证)。要连接到这些站点，我必须使用经过身份验证的代理。

我必须启用 CORS 以允许跨域加载，但如果此域是基本身份验证的并且我使用经过身份验证的代理，我似乎无法从另一个域加载资源。

我在 Apache 中添加了以下指令:

SetEnvIf Origin "^http(s)?://(.*)$" origin_is=$0 
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "*"

它应该允许所有 Origin，但是当 CSS 加载 woff 文件(通过 GET 请求)时，我得到:

请求 (仅有趣的 header ):

GET file.woff HTTP/1.1
User-Agent  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0
Host  media.site1.com
Origin  https://www.site1.com
Proxy-Authorization Basic XXX1234567
Connection  keep-alive
Cache-Control   max-age=0

响应 (如 Firebug 或 Httpfox 所见):

HTTP/1.0 401 Unauthorized
WWW-Authenticate    BASIC realm="Unspecified"
Server  BigIP
Connection  close
Content-Length  0

如果我在访问 www 之前手动对 media.site1.com 进行身份验证，结果是一样的。浏览器似乎没有将基本身份验证凭据发送到“媒体”服务器。

我是否必须设置任何其他 header 以确保从不同位置加载 WOFF 文件，使用基本身份验证并最终使用企业身份验证代理？

Answer 1

我们只是遇到了同样的情况。

根据 W3C 规范，从 CSS 文件链接的字体必须以“匿名”模式加载:https://www.w3.org/TR/2013/CR-css-fonts-3-20131003/#font-fetching-requirements
所以基本上浏览器通常不会发送身份验证 cookie。

根据我的理解，您有两种选择:

在 https://media.site1.com 上禁用字体文件的身份验证

这是一个 hack，我不完全确定它会起作用。您可以尝试在 CSS 文件之前发出 AJAX 请求以加载字体，如下所述:https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/当然，在本文中，他们这样做是出于性能原因，但尽管如此，我们的想法是单独加载字体文件，以便在加载 CSS 文件时浏览器将从其缓存中获取它。您可能需要添加 withCredentials AJAX 调用中的 header ，如下所述:https://stackoverflow.com/a/7190487此外，鉴于通常您在页面顶部加载 CSS 文件，在底部加载 JavaScript，为了防止 CSS 文件首先加载并发出失败的请求，您需要在 AJAX 调用的成功回调上动态加载它。

我知道第二个解决方案似乎太麻烦了，但我想不出更好的解决方案。