腾讯云 cos 字体在CDN上跨域处理

问题描述：项目中用到了字体的静态资源，把静态资源放到了腾讯云对象存储提供的 COS 上，同时启用它的CDN来加速。但是，调试的过程中发现报错：CSS加载字体跨域了，字体图标无法正常显示。

原因：字体文件在 CDN 服务器上，但是项目部署在自己的服务器上，导致字体文件出现了跨域加载的问题。

解决方案：

COS 控制台配置：

1）打开 COS 控制台，在腾讯云对象储存控制面板中的「基础配置」找到「跨域访问 CORS 设置」；

2）点击「添加规则」，在来源 Origin 中填写自己的域名；（如果在来源 Origin 中填写 *，则表示允许所有域名跨域。）

CDN 跨域设置：

3）进行 CDN 跨域设置，如果对象存储使用了 CDN，需要在 CDN 进行跨域配置；

4）在「高级设置」中点击「添加HTTP Header」；

5）选择参数 Access-Control-Allow-Origin 取值 * ，或者填写自己的域名；

*注：配置可能需要几分钟后才能生效。 *

高级配置：

6）HTTP header 配置 -> 添加 HTTP header

官方文档跨域访问设置

腾讯云 cos 字体在CDN上跨域处理相关推荐

腾讯云COS服务器文件上传与生命周期的设置，以及Opencv nparry数组格式图片非文件流方式上传
目录 Opencv numpy arry图片非文件流直接上传腾讯云COS服务器的文件上传和生命周期的设置 1.申请服务器 2.创建桶 3.官方文档以及安装SDK 4.开始使用(官方示例代码) 5.必 ...
SpringBoot整合腾讯云COS对象存储实现文件上传
企业级项目开发中都会有文件.图片.视频等文件上传并能够访问的场景,对于初学者Demo可能会直接存储在应用服务器上:对于传统项目可能会单独搭建FastDFS.MinIO等文件服务来实现存储,这种方案可能 ...
Java springboot项目引入腾讯云COS实现上传
Java springboot项目引入腾讯云COS实现上传 pom.xml 配置类CosConfig.java 上传工具类CosClientUtil.java pom.xml <!--腾讯云上传 ...
图片上传到腾讯云COS小案例
一.安装扩展包 composer require "overtrue/laravel-filesystem-cos" 二. 修改配置文件 config/filesystems.ph ...
Java实现腾讯云COS高级（大文件）上传,不考虑分块
// 腾讯云COS高级(大文件)上传,不用考虑分块public static URL fileCOS(File file, String key) throws Exception {String S ...
tp5封装腾讯云cos文件上传sdk
第一步: 使用命令安装sdk到框架vendor目录里 composer require tencentcloud/tencentcloud-sdk-php 第二步:在application/commo ...
react antd-mobile v2图片选择器ImagePicker压缩图片上传腾讯云COS处理方案
本文介绍:react移动端 antd-mobile V2版本使用图片选择器 ImagePicker时,前端压缩图片并且上传腾讯云COS 如果不上传腾讯云,纯选择压缩,可查看:antd-mobile-v ...
腾讯云COS上传下载文件
1.初始化COSClient import com.qcloud.cos.COSClient; import com.qcloud.cos.ClientConfig; import com.qclou ...
SpringBoot整合腾讯云COS（上传）
腾讯云COS文档:对象存储快速入门-SDK 文档-文档中心-腾讯云 (tencent.com) 开通腾讯云COS 创建存储桶请求域名可做拼接文件访问URL使用然后下一步即可上传文件时需要以上红 ...

腾讯云 cos 字体在CDN上跨域处理

腾讯云 cos 字体在CDN上跨域处理相关推荐

最新文章

热门文章