跨域字体未加载

Posted 2023-05-08

【中文标题】跨域字体未加载

【英文标题】：Cross-Domain Fonts not loading

【发布时间】：2017-12-10 00:23:35

【问题描述】：

我在 Digital Ocean 上建立了一个网站 http://sugarcoated.co。该域名是通过 Hover 购买的。

此站点的 IP 地址是45.55.209.201

当我在浏览器中加载 IP 地址 http://45.55.209.201 时，所有字体都可以正常加载，但是当我加载 http://sugarcoated.co 时，我收到了 CORS 错误消息。

在以下位置访问字体 'http://45.55.209.201/wp-content/themes/sugarcoated/css/fonts/montserrat/montserrat-regular-webfont.woff2' 来自原点“http://sugarcoated.co”已被 CORS 策略阻止： 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://sugarcoated.co” 访问。

我是服务器配置的新手，不确定我可能错过了哪个设置。

在悬停时，我已经像这样设置了域：

在Digital Ocean中，我的DNS记录如下：

【参考方案1】：

对于浏览器来说，http://sugarcoated.co 和 http://45.55.209.201 是完全不同的来源。

正如 https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy 和 https://en.wikipedia.org/wiki/Same-origin_policy 所解释的，浏览器遵循的同源策略是 Web 安全模型的核心，可防止对某些类别的资源的跨域请求。

字体是默认阻止跨域请求的资源类别之一。

对于允许跨域字体请求的浏览器，字体来自的服务器必须发送一个允许它的Access-Control-Allow-Origin 响应标头。

因此，对于允许http://sugarcoated.co 使用来自http://45.55.209.201 的字体的浏览器，来自http://45.55.209.201/wp-content/themes/sugarcoated/css/fonts/… 的响应必须包含Access-Control-Allow-Origin: http://sugarcoated.co 响应标头以仅允许http://sugarcoated.co 使用字体，否则Access-Control-Allow-Origin: *允许任何来源使用字体。

要么这样，要么您只需在需要字体的整个文档源中将 http://45.55.209.201 更改为 http://sugarcoated.co，或者只使用像 /wp-content/themes/sugarcoated/css/fonts/montserrat/montserrat-regular-webfont.woff2 这样的相对 URL，而不是包含主机名的绝对 URL。

没关系，在下面，http://sugarcoated.co 和 http://45.55.209.201 实际上是同一个服务器。浏览器无法知道这一点。为了让浏览器将它们视为同一来源，主机部分必须完全匹配，逐个字符。

【讨论】：

它最终是IP地址存储在数据库中而不是域中的事实。谢谢。