使用element icon时跨域

项目是在node服务端拉取cdn静态资源提供到客户端访问,
在cdn域名下提示我当前的域名访问fonts资源跨域了

静态资源为什么会有跨域问题?

• 通过@font-face 引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。
• 了解同源策略点这里

解决方案

提供三种解决方案, 基于网络安全考虑, 推荐第一种

1.找运维加cors头部, 允许当前域名的访问

2.使用外部公开的CDN, 即cdn资源下允许所有域名访问(access-control-allow-origin : *);

外部公开的CDN, 这里推荐unpkg

官网
unpkg 是一个快速的全球内容交付网络，适用于npm 上的所有内容。使用它可以使用以下 URL 快速轻松地从任何包加载任何文件：

// cnd url的拼接规则
unpkg.com/:package@:version/:file

具体使用方式

• 找到项目使用elementUI的版本, 并找到项目中element icon的引用, 然后将@font-faceurl换为unpkg.com上的资源路径

@font-face {
  font-family: 'element-icons';
  src: url(https://unpkg.com/element-ui@2.15.2/lib/theme-chalk/fonts/element-icons.ttf);
}
@font-face {
  font-family: 'element-icons';
  src: url(https://unpkg.com/element-ui@2.15.2/lib/theme-chalk/fonts/element-icons.woff);
}

• 问题解决

  
  

https访问http报错

报错信息

由于cdn资源地址是http协议, 而我当前项目是https协议, 访问时就有以下错误:
This request has been blocked; the content must be served over HTTPS.

问题原因

在https下默认是不允许发送http请求的

解决方案

提供三种方案, 推荐最后一种, 让浏览器根据当前协议去访问url

1. 使用Nginx提升为https请求
2. 在页面添加meta标签, 让浏览器默认升级请求

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

3. 写资源路径的时候，可以把前面的http:去掉