跨域字体未加载

Question

我在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记录如下：

Answer 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之类的相对网址而不是绝对网址包含主机名。

在下面，http://sugarcoated.co和http://45.55.209.201实际上是同一台服务器并不重要。浏览器无法知道这一点。对于浏览器将它们视为相同的来源，主机部分必须完全匹配，符合字符。