css 从站点读取文件时阻止HTML跨源请求

k5hmc34c  于 2023-01-06  发布在  其他
关注(0)|答案(1)|浏览(111)

我从我的站点url读取一个.css文件到我的站点;

    • 就像这样**
...
<link rel="stylesheet" href="https://sample.com/styles.css"
...

在那个文件中,我定义了一个字体

    • 就像这样**
...
@font-face{
   font-family:'SomeFont';
   src: url('myfont.ttf') format('truetype');
}
...

(即字体位于地址https://sample.com/myfont.ttf
但是,当使用font-family:SomeFont; InHTML Styles时,它不会读取我的字体,而是使用浏览器的默认字体写入文本!
当读取该字体时,它会给出以下错误:

1- Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sample.com/myfont.ttf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

2- downloadable font: download failed (font-family: "SomeFont" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://sample.com/myfont.ttf

错误图像:

我的问题的解决方案是什么?

wj8zmpe1

wj8zmpe11#

我的问题已通过以下解决方案解决:
将这些行放入字体文件所在文件夹的.htaccess文件中。(即,在https://sample.com/中创建一个.htaccess文件)

<IfModule mod_headers.c>  
    Header set Access-Control-Allow-Origin '*'
</IfModule>

上面的行允许从任何站点读取您的文件。

相关问题