Google chrome 无法使用Firebase宿主从CDN加载材质设计css

我得到以下错误：

无法加载XMLHttpRequest . 不 “Access Control Allow Origin”标头出现在请求的服务器上 资源。来源“”是 因此不允许访问

这是我的firebase.json文件：

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    // Add the "headers" section within "hosting".
    "headers": [
      {
        "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      },
      {
        "source": "**/*.@(jpg|jpeg|gif|png)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=7200"
          }
        ]
      }
    ]
  }
}

---

应如何更正此问题？

code.getmdl.io

不发送浏览器允许前端JavaScript代码访问响应所必需的

访问控制允许源代码

响应头

有更多的细节

问题中显示的

firebase.json

文件是针对我猜的站点的？如果是这样，你在那里做什么CORS配置并不重要，重要的是你的代码将请求发送到的站点上设置了什么CORS配置

而且

code.getmdl.io

站点显然没有允许跨源请求的CORS配置

但是你可以通过使用CORS代理来解决这个问题。您可以改为使用此请求URL：

https://cors-anywhere.herokuapp.com/https://code.getmdl.io/1.3.0/material.indigo-pink.min.css

它通过发送请求，将请求转发到

https://code.getmdl.io/1.3.0/material.indigo-pink.min.css

，然后接收响应。

https://cors-anywhere.herokuapp.com

backend将

Access Control Allow Origin

头添加到响应中，并将其传递回请求的前端代码

然后，浏览器将允许前端代码访问响应，因为带有

访问控制允许原点的响应是浏览器看到的

您还可以使用
轻松设置您自己的CORS代理，代理是否会宣传CDN的好处？是的，我想在代理之间放置代理会降低使用CDN的好处，但是如果您除了需要首先使用CDN之外没有其他选择，至少可以让它与前端代码一起工作