CORS問題請求的資源上沒有「Access-Control-Allow-Origin」標頭

我的子字段中有我的字體，例如static.example.com今天，字體不在Chrome中顯示，也在Firefox中顯示 - 並且此錯誤在開發工具中出現：CORS問題請求的資源上沒有「Access-Control-Allow-Origin」標頭

«來自原始字體'http://static.example.com'的字體已被阻止被跨源資源共享策略加載：在請求的資源上沒有'Access-Control-Allow-Origin'標頭。因此，原產地「http://example.com」是不允許訪問»

我已經有子域中的.htaccess文件

<IfModule mod_headers.c> 
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$"> 
    Header set Access-Control-Allow-Origin "*" 
    Header set Access-Control-Allow-Headers "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With" 
    Header set Access-Control-Allow-Methods "GET, PUT, POST" 
    </FilesMatch> 
</IfModule>

而且這個代碼，如果我嘗試curl -I http://static.example.com/fonts/pfcentrosanspro-reg-webfont.eot在終端，我得到這樣的響應：。

HTTP/1.1 200 OK 
Server: nginx 
Date: Wed, 27 Aug 2014 17:20:50 GMT 
Content-Type: font/eot 
Content-Length: 26403 
Connection: keep-alive 
X-Accel-Version: 0.01 
Last-Modified: Mon, 05 Aug 2013 17:49:42 GMT 
Accept-Ranges: bytes 
Cache-Control: max-age=31536000 
Expires: Thu, 27 Aug 2015 17:20:50 GMT 
X-Powered-By: PleskLin 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Headers: Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With 
Access-Control-Allow-Methods: GET, PUT, POST

但是錯誤仍然存在，我已將字體移至Amazon S3 CDN中的存儲桶中並使用以下代碼：

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
    <AllowedOrigin>http://example.com</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <AllowedMethod>HEAD</AllowedMethod> 
    <AllowedMethod>DELETE</AllowedMethod> 
    <AllowedMethod>PUT</AllowedMethod> 
    <AllowedMethod>POST</AllowedMethod> 
    </CORSRule> 
</CORSConfiguration>

沒有運氣，錯誤仍然存在 - 字體無法加載，CORS錯誤顯示 - 我甚至修改了Nginx配置文件而沒有結果！

我做錯了什麼？這讓我瘋狂。

該網站是W3的總緩存插件WordPress的博客

謝謝您的幫助！

來源

2014-08-27 roymckrank

肯定聽起來像是一個緩存問題。由於cURL標頭是正確的，它們在瀏覽器請求中也應該是正確的。 Chrome/Firefox中是否禁用瀏覽器緩存？您可以在Chrome開發人員工具設置中執行此操作。 – rauberdaniel 2014-11-07 19:09:01

您是否找到解決方案？ – 2016-12-21 10:39:08

有些瀏覽器不喜歡這樣的：

Access-Control-Allow-Origin *

您應將此設定爲始發請求的域名。我在類似的問題上遇到了很多困難，最終落在了下面的解決方案（PHP，但你會明白）。

$origin=isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:$_SERVER['HTTP_HOST']; 
header('Access-Control-Allow-Origin: '.$origin);   
header('Access-Control-Allow-Methods: POST, OPTIONS, GET, PUT'); 
header('Access-Control-Allow-Credentials: true'); 
header('Access-Control-Allow-Headers: Authorization, X-Requested-With'); 
header('P3P: CP="NON DSP LAW CUR ADM DEV TAI PSA PSD HIS OUR DEL IND UNI PUR COM NAV INT DEM CNT STA POL HEA PRE LOC IVD SAM IVA OTC"'); 
header('Access-Control-Max-Age: 1');

此代碼將接受來自所有域的所有請求。這可能是不安全的。您可能希望檢查針對接受域的白名單的請求。

來源

2014-12-09 14:05:42 PerKristian

CORS問題請求的資源上沒有「Access-Control-Allow-Origin」標頭

回答

相關問題