CDN引起的 字体跨域问题，解决方案和问题

最新推荐文章于 2023-02-14 20:45:00 发布
最新推荐文章于 2023-02-14 20:45:00 发布
阅读量699 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37586590/article/details/60577675
版权

今天部署外网上线事宜，前端我来配置了CDN，阿里云的 CDN服务，其他都没问题，简直了  

阿里云的CDN  GZIP压缩也是够强

开启GZIP压缩后，原来我几十K 的 JS文件，直接变成了 不足1K ，秒加载，你妹，我们项目组高兴了一把。

这网站还不是秒开么 ？

----------------------------------------------


看效果 ：



通过这个 我得到也给结论， 在代码文件结构 尽量优化的同时，能力再强已经到极限了，但你服务器辣鸡，搭配不当，你代码优化上天 也是徒劳啊。

你不怎么优化， 服务器 各种技术配置到位的话， now你也看到了，我一个系统首页也不过用了几百ms，比我本地开发环境都快（mdzz，怪不得阿里这么贵）！


------------------------------  吹牛逼结束 ，开始记录今天遇到的一个问题  

*  字体 font  跨域加载问题   看图

最低0.47元/天 解锁文章
qq_37586590
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CDN字体跨域问题
liuarmyliu的博客
09-29 769
用vue写了一个h5移动端页面，因为涉及到了很多动图所以用了腾讯云的CDN加速，但是出现了一个神奇的问题，图片类都可以使用CDN地址，但是字体文件浏览器却报了跨域错误 原因是：字体文件在CDN服务器上、项目部署在后端的服务器 然后 解决方法是： 将字体文件转成base64，这个网站可以转换 记得要把这个勾上 然后把里面的css，copy到自己的项目要用到的地方，就可以愉快的显示了 ...
CDN中，字体文件的跨域问题和解决
Aesop的博客
10-28 1394
来源：CDN中，字体文件的跨域问题和解决 由于网站的资源文件使用的是另外的域名（这样做是便于浏览器在加载时可以提高加载效率， 关于domain hash也就是多域名来加速访问的问题有空再说）， 这样主域名和资源的域名尤其是字体文件，就形成跨域访问，在主域名的网站无法加载资源域名中的字体。 处理这种跨域，只要设置Access-Control-Allow-Origin，允许目标域名访问就可以了，Access-Control-Allow-Origin是HTML5新增的一个特性，在资源类的域名下做如下配置（ngi
HTTP 字体跨域问题
m0_55208453的博客
10-27 696
一、背景介绍 最近在做公用菜单时，由于除了提供给子应用系统html代码外还需要提供样式、脚本。样式中涉及到了字体。跨域的情况下，样式脚本都可以正常访问，但是字体访问就会出现跨域问题了。 二、问题描述 问：什么是字体跨域？ 答：就是你所引用css样式里，会用到一些自定义的字体，比如 “微软雅黑”，“宋体”，当然这些都是微软公开的，所受所有系统支持的，可正常显示。还有一些是设计师设计出来的字体，会涉及到版权问题（当然这后面讨论），当你用的时候回通过HTTP访问这些字体，HTTP链接和你网站的链接，域名不一致，
关于字体等静态文件跨域的解决方法 关键字 Access-Control-Allow-origin
u012379505的博客
11-03 4380
字体跨域如何解？​ 关键字 Access-Control-Allow-origin 1首先要确定 字体所在域是否有cdn,首先 要在调用服务器 nginx配置内 添加 ​    location ~* \.(eot|ttf|woff|svg|otf|json)$ {      add_header Access-Control-Allow-Origin *;
Apache跨域资源访问报错问题解决方案
01-20
很多时候，大中型网站为了静态资源分布式部署，加快访问速度，减轻主站压力，会把静态资源（例如字体文件、图片等）放在独立服务器或者CDN上，并且使用独立的资源域名（例如res.test.com） 但是在实际部署中，会发现...
浅谈CSS字体的加载加速问题
09-24
最后，考虑使用字体服务，如Google Fonts或Adobe Typekit，它们提供了一套完整的解决方案，包括优化的字体文件格式、CDN分发和智能加载策略，可以帮助开发者轻松地引入并优化自定义字体。 总的来说，优化CSS字体...
arcgis_for_js本地字体.zip
10-20
总的来说，正确配置和使用本地字体是解决ArcGIS for JavaScript字体跨域问题的有效方法，这不仅解决了安全问题，还能确保地图元素的正常显示。通过理解Web开发中的跨域限制和如何处理这些问题，可以提升你的地图应用...
Apache、Nginx下Font Awesome在 Firefox 中不显示问题解决方法
09-15
这两个解决方案都旨在放宽Firefox对跨域字体加载的限制，使得Font Awesome图标能在Firefox中正确显示。 总的来说，理解浏览器的安全策略和如何通过配置服务器来适应这些策略对于开发者来说至关重要，尤其是在使用第...
vue cli构建的项目中请求代理与项目打包问题
11-29
Vue CLI提供了一个解决方案，即通过Webpack Dev Server的代理配置来解决这个问题。在`vue.config.js`文件中，你可以设置一个`proxy`对象，将所有特定的HTTP请求转发到指定的API服务器。例如，如果你所有的API请求...
cdn-font:自用字体CDN加速仓库（jsDelivr）如果需要白嫖其他的加速可能会另起炉灶
03-27
CDN字体 自用字体CDN加速仓库（jsDelivr）如果需要白嫖其他的加速可能会另起炉灶
解决css引用字体跨域问题
Littleree的博客
07-19 371
解决css引用字体跨域问题
cdn 字体_从CDN提供字体
culuo8053的博客
08-03 2832
cdn 字体For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain f...
解决IE浏览器字体跨域的2种办法
Too_sober的博客
05-19 640
项目中用到了矢量图标字体，IE浏览器提示字体跨域了，应该是不同浏览器策略的问题。 方式1：修改web服务器的配置（推荐） 拿nginx来说，在对应的域名配置下加入“add_header Access-Control-Allow-Origin *;”（*号也可以改为具体的某个域名），如下： server { listen 80; ...... location / { add_header Access-Control-Allow-Origin *;
使用 CDN 或直接引入的方式，更换网站中文字体
热门推荐
Lolipop's Studio.
07-17 1万+
看腻了原先的字体，亦或是想满足独树一帜的设计欲望？不妨更换一下网站的字体吧！ 引入字体文件 这里提供两种引入的思路，一种是 CDN 引入，一种是本地引入。建议通过 CDN 的方式引入，可以大大提高加载效率。 引入 CDN 字体文件 以更换字体为思源黑体（Google 字体上叫 Noto Sans，Adobe 版本叫 Source Han Sans）为例，考虑到中文站点面向的读者在国内，无法直接下载思源黑体这款 Google 字体，因此考虑需要通过第三方 CDN 的方式引入它。据笔者测试，目前找到了这四个 C
腾讯云 cos 字体在CDN上跨域处理
且听风吟的博客
02-14 1912
腾讯云 cos 字体在CDN上跨域
解决字体文件Font跨域权限问题
kekevin的博客
08-26 3987
问题描述： Font from origin 'http://trunk.supply_chain.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.xicheng.com' is therefore not al
解决跨域问题的n种办法
sinat_34798463的博客
03-17 4303
今天我们来聊聊跨域的事情，那我们先从浏览器的报错开始吧！ 见到这个报错信息，那么就要恭喜你，遇到了跨域这个磨人的小妖精了。 关于这篇文章的代码，需要的自取。 什么是跨域？ 那么说到跨域，我们就需要先搞懂什么是同源策略？ 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 所谓"同源"指的是“三个相同”。 协议相同 域名相同 端口相同 当协议、域名、端口中任意一个不相同时，都算作跨域。需注意即使两个
跨域问题解决
汝之秀
07-14 1479
问题显示 什么是跨域？？ 跨域：一个域的前端js脚本代码，访问另一个域的后端代码（controller） 学成在线 测试 上边的代理 ，结果 报错如下 ： No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:11000' is ...
flask+ajax的跨域问题解决步骤和详细代码
最新发布
05-12
跨域问题是由于浏览器的同源策略导致的，所以我们需要在后端进行一些配置和处理来解决跨域问题。下面是解决跨域问题的步骤和详细代码： 步骤： 1. 安装 Flask-CORS 扩展 ``` pip install flask-cors ``` 2. 在 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值