跨域字體未加載

Question

我在http://sugarcoated.co上建立了Digital Ocean網站。該域名是通過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政策： 否「訪問控制允許來源」標頭出現在請求 資源。原因'http://sugarcoated.co'因此不允許 訪問。

我是新來的服務器配置，我不知道我可能錯過了哪些設置。

在懸停我已經設置了域名，像這樣：

在數字海洋，我的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整個文檔的來源需要字體，或者只是使用相對URL如/wp-content/themes/sugarcoated/css/fonts/montserrat/montserrat-regular-webfont.woff2而不是包含主機名的絕對URL。

下面沒什麼關係，http://sugarcoated.co和http://45.55.209.201實際上是同一臺服務器。瀏覽器無法知道這一點。對於瀏覽器將它們視爲同一來源，主機部分必須完全匹配，字符換字符。