无法使用 Firebase 托管从 CDN 加载材料设计 css

Question

我收到以下错误：

XMLHttpRequest 无法加载 https://code.getmdl.io/1.3.0/material.indigo-pink.min.css。不 请求中存在“Access-Control-Allow-Origin”标头 资源。原点“https://nhalistonfirebase.firebaseapp.com”是 因此不允许访问。

这是我的 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"
          }
        ]
      }
    ]
  }
}

应该如何纠正？

Answer 1

code.getmdl.io 不会发送 Access-Control-Allow-Origin 响应标头，这是使浏览器允许您的前端 JavaScript 代码访问响应所必需的。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 有更多详细信息。

我猜问题中显示的firebase.json 文件是针对https://nhalistonfirebase.firebaseapp.com 网站的？如果是这样，那么您在那里执行什么 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://cors-anywhere.herokuapp.com 发送请求，https://cors-anywhere.herokuapp.com 将请求转发到https://code.getmdl.io/1.3.0/material.indigo-pink.min.css，然后接收响应。 https://cors-anywhere.herokuapp.com 后端将 Access-Control-Allow-Origin 标头添加到响应中，并将其传递回您的请求前端代码。

然后浏览器将允许您的前端代码访问响应，因为带有Access-Control-Allow-Origin 响应标头的响应是浏览器看到的。

您还可以使用 https://github.com/Rob--W/cors-anywhere/ 轻松设置自己的 CORS 代理