字体在Web客户端cors中被阻止 [英] fonts are blocked in web client cors
问题描述
当我在本地工作时,一切正常,但是现在我上传到托管服务器,并且字体被未知的(CORS)阻止。字体(和CSS,JS等)位于子域中,因为URL由索引解析(因此路径在域中不起作用)。 css / js可以正常工作。
While I was working in local everything worked perfectly, now I uploaded to a hosting and the fonts are being blocked by something I've never heard of (CORS). The fonts (and css, js, etc) are in a subdomain because urls are parsed by the index (so paths are not working in the domain). The css/js are working ok.
这是Web控制台(Firefox)中的输出:
This is the output in the web console (firefox):
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Oxygen-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Oxygen-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Oxygen-Regular.ttf styles.css:10:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Montserrat-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Montserrat-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Montserrat-Regular.ttf styles.css:6:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff2 bootstrap.css:267:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff bootstrap.css:267:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.ttf bootstrap.css:267:12
我搜索了此问题,但找不到字体的具体问题和确切的错误消息。
I searched for this problem but i cannot find this especific problem with fonts and the exact error message.
编辑:
解决方法是为提供文件的域/文件夹。该配置可以在虚拟主机块中,也可以在.htaccess文件中(在文件所在的文件夹中)。我更喜欢在vhost块中进行设置:
The fix is to enable the header for the domain / folder serving the files. The config can be either in the virtual host block or in a .htaccess file (in the folder where the files are). I prefer setting it in the vhost block:
<IfModule mod_headers.c>
SetEnvIf Origin "https://(www|sub1|sub2|sub3).domain.com)$" ACAO=$0
Header set Access-Control-Allow-Origin "%{ACAO}e" env=ACAO
Header set Access-Control-Allow-Methods "GET"
</IfModule>
在此示例中, Access-Control-Allow-Origin
仅发送白名单域和子域的标头。我从 domain.com
重定向到 www.domain.com
,所以此示例不接受没有<$的域c $ c> www 。
In this example, the Access-Control-Allow-Origin
will only send the header for the whitelisted domain and subdomains. I redirect from domain.com
to www.domain.com
so this example won't accept a domain without www
.
推荐答案
您的浏览器抱怨缺少标题:访问控制-Allow-Origin
Your browser is complaining about a missing header: Access-Control-Allow-Origin
由于缺少此标头,因此您的浏览器不知道所需的访问权限是合法的。查看 http://enable-cors.org 并选择适合您服务器的配置。
Because this header is missing your browser does not know that the desired access is legit. Have a look at http://enable-cors.org and choose the configuration appropriate for your server.
您需要配置存储字体的服务器!
You need to configure the server where the fonts are stored !
这篇关于字体在Web客户端cors中被阻止的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!