WordPress 配置 CDN 后字体的跨域(CORS)问题

什么是跨域(CORS)?

跨域指的是:浏览器不能执行其他网站的脚本,从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域。跨域是由浏览器的同源策略造成的,是浏览器施加的安全限制。a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的。

什么文件最容易产生跨域问题?

字体文件,如.tff、woff文件等。

怎么解决?

源站配置跨域
apache:

<Directory />
AllowOverride None
Header set Access-Control-Allow-Origin * //设置允许跨域域名
Header set Access-Control-Allow-Methods * //响应标头指定响应访问所述资源到时允许的一种或多种方法预检请求
Header set Access-Control-Allow-Headers content-type,authorization //响应报头在响应用于一个预检请求指示哪个HTTP标头将通过提供Access-Control-Expose-Headers使实际的请求时。
Header set Access-Control-Max-Age '1728000'//响应 header 指示多长时间的结果预检请求(即包含在所述信息Access-Control-Allow-Methods和Access-Control-Allow-Headers的 headers )可以被缓存。
Header set Content-Security-Policy  upgrade-insecure-requests
</Directory>

nginx(主要针对字体文件):

location ~ .*.(eot|ttf|ttc|otf|eot|woff|woff2|svg)(.*) 
    {
      add_header Access-Control-Allow-Origin *;
    }

若不是字体文件引起的跨域则可以在server段添加add_header Access-Control-Allow-Origin *;

CDN配置跨域

以腾讯云为例:

WordPress 配置 CDN 后字体的跨域(CORS)问题

配置过后重启nginxapache、刷新CDN缓存,Crtl+F5强制刷新页面,跨域问题消失。

给TA打赏
共{{data.count}}人
人已打赏
技术教程

1分钟一键启动一个带证书的 WordPress 博客

2023-3-2 11:06:09

技术教程

Vue 的 v-model 和 model-value 有什么区别

2023-3-28 15:50:48

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索