拒绝应用来自 'https://codepen.io/... 的样式,因为它的 MIME 类型 ('text/html') 不受支持

问题描述

我正在尝试创建一个代码笔,该代码笔引用用于多个项目的基本模板。 当我查看 colsole 时,我收到以下错误消息。

拒绝应用来自“https://codepen.io/...”的样式,因为其 MIME 类型(“text/html”)不是受支持的样式表 MIME 类型,并且启用了严格的 MIME 检查。

我所做的:

  • 使用对各种 js 和 css CDN 的引用创建了我的模板。
  • 在 codepen 的 HTML 部分放置了一些演示代码
  • 为 css 添加了一些 @font-face 代码

这是单击控制台中的错误消息时出现的代码。 在引用模板的 Pen 中,我添加的只是一个 H2 标签

我不明白为什么会收到错误消息。

<html lang="en" >
<head>
<Meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<Meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />

<title>CodePen - A Pen by Me</title>

<link rel='stylesheet' href='https://codepen.io/pen/?template=abc'>
</head>

<body translate="no" >
  <h2>hello</h2>
  <script src='https://codepen.io/pen/?template=ABCDEF'></script>
</body>
</html>```


解决方法

我通过在 heroku.com 上设置代理并将其用作中继来解决此问题。