使用 CDN 中的 Ionicons 时如何解决 CORS 问题？答案

【问题标题】：How do I fix CORS issue when using Ionicons from CDN?使用 CDN 中的 Ionicons 时如何解决 CORS 问题？
【发布时间】：2020-02-27 09:02:01
【问题描述】：

我已经建立了一个非常基本的 Web 项目，其中包含以下文件：

我在我的 html 文件的头部包含了以下行：

<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">

我在我的 html 文件中使用这样的图标：

<i class="icon ion-md-menu"></i>

图标显示正常，但现在预览项目时收到 CORS 错误。

CORS 政策已阻止从源“http://127.0.0.1:5500”访问“https://unpkg.com/ionicons@4.5.10-0/dist/fonts/ionicons.woff2?v=4.5.9-1”处的字体：请求的资源上不存在“Access-Control-Allow-Origin”标头。

不知道为什么我现在收到错误，而以前它工作得很好。任何想法如何解决这个问题？谢谢。

【问题讨论】：

尝试将请求 URL 更改为 https://unpkg.com/ionicons@4.5.10-0/dist/fonts/ionicons.woff2 — 因为这是 https://unpkg.com/ionicons@4.5.10-0/dist/fonts/ionicons.woff2?v=4.5.9-1 重定向到的 URL。但问题是，服务器发送的 302 重定向响应有一个 access-control-allow-origin: https://www.medical-care.net 响应头，这意味着如果发出请求的文档托管在 https://www.medical-care.net 下，浏览器只会遵循该重定向。
https://unpkg.com/ionicons@4.2.2/dist/css/ionicons.min.css 给了我同样的问题（已经使用了一年没有问题）。升级到https://unpkg.com/ionicons@4.2.6/dist/css/ionicons.min.css，问题就解决了。我猜 unpkg 有一些配置问题？
按照@Tspoon 的建议更新cdn 以使用https://unpkg.com/ionicons@4.2.6/dist/css/ionicons.min.css 可以让我正确显示图标。

【解决方案1】：

注入这些 url 似乎是 unpkg 问题，所以当我转移到解决问题的 cloudfare cdn 时，https://cdnjs.com/libraries/ionicons

【讨论】：