如何使用Flutter Web和CanvasKit渲染器配置CORS？

Question

问题

我有一个使用CanvasKit渲染的Flutter Web项目，托管在Firebase Hosting上，但我无法加载托管在Xano CDN上的外部图像或加载GooglePlaces API结果（自动编译）。 我阅读了许多其他解决方案（例如这个，这个或这个），但都无效。 我还配置了 Google Cloud 上的CORS。

我的文件

这是我的firebase.json文件：

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "*",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      }
    ]
  }
}

在index.html文件中，我在</body>标签之前添加了以下脚本：

<!-- Firebase -->
<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-analytics.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: *mykey*,
    authDomain: "hearth-148b0.firebaseapp.com",
    projectId: "hearth-148b0",
    storageBucket: "hearth-148b0.appspot.com",
    messagingSenderId: *id*,
    appId: *myappid*,
    measurementId: *id*
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
</script>

我试图将头文件包含在CachedNetworkImage中：

return CachedNetworkImage(
    httpHeaders: {"Access-Control-Allow-Origin": "*"},
    imageUrl: imageUrl,
    fit: fit,
    width: width,
    height: height,
    progressIndicatorBuilder: (context, url, downloadProgress) =>
        LoadingPlaceholder(width: width),
    errorWidget: (context, url, error) => SizedBox(width: width),
  );

我尝试将标题包含在GooglePlace初始化器中：

 final GooglePlace googlePlace = GooglePlace(
    kTokenGMaps,
    headers: {"Access-Control-Allow-Origin": "*"},
  );

错误

这是浏览器控制台显示的错误类型：

无法加载资源：net::ERR_BLOCKED_BY_CLIENT

或者

访问XMLHttpRequest位于 'https://storage.googleapis.com/xatr-ly1x-gkt1.n7.xano.io/vault/xhL5_hu1/fMPW0YCx/C01_Ng../9de15d31/Monumento_ai_caduti_in_Corso_Europa.jpg' (重定向自 'https://xatr-ly1x-gkt1.n7.xano.io/vault/xhL5_hu1/fMPW0YCx/C01_Ng../Monumento_ai_caduti_in_Corso_Europa.jpg?tpl=big:box') 源' https://hearth-148b0.web.app '的CORS策略已阻止对请求的资源进行访问：在所请求的资源上不存在“Access-Control-Allow-Origin”标头。

部署

这些是我从Android Studio使用的用于在Firebase上部署的命令：

flutter build web
firebase deploy

备选方案

我还尝试使用另一个主机和FTP，并将.htaccess文件设置为：

Header set Access-Control-Allow-Origin *

但是没有成功。

- Leonardo Rignanese

---

ERR_BLOCKED_BY_CLIENT错误是需要修复的根本错误；CORS错误是其副作用；如果ERR_BLOCKED_BY_CLIENT错误的原因被解决，CORS问题也可能会消失。https://stackoverflow.com/search?q=ERR_BLOCKED_BY_CLIENT。https://stackoverflow.com/search?q=ERR_BLOCKED_BY_CLIENT+%5Bfirebase%5D。 - sideshowbarker

你是怎么修复它的？ - Muhammad Adil

我更换了服务器，问题在一天左右自行解决。我怀疑是服务器缓存问题，但我不敢确定。 - Leonardo Rignanese

Answer 1

我通过调整服务器端的CORS设置解决了这个问题。最初，我以为这是客户端的问题，但后来发现是服务器上的配置错误导致的。

在我的情况下，我正在使用Firebase Storage，并且我必须在我的计算机上创建一个cors.json文件来启用CORS。以下是我的配置示例：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

分解一下：

• "origin": ["*"] 允许来自任何来源的请求访问资源。您可以指定特定的域或域列表以限制允许访问资源的来源。

• "method": ["GET"] 仅允许使用 GET 请求访问资源。您可以包括其他 HTTP 方法，如 POST、PUT、DELETE 等，以限制允许访问资源的方法。

• "maxAgeSeconds": 3600 在浏览器中缓存 CORS 配置 1 小时（3600 秒）。在缓存持续时间内，来自相同来源和方法的后续请求将不需要进行 CORS 检查。

创建 cors.json 文件后，在 安装 gsutil 后，在终端中执行此命令：

gsutil cors set cors.json gs://<bucket>.appspot.com

请确保将<bucket>替换为您的存储桶的名称。

通过遵循这些步骤，我成功解决了我的CORS问题并启用了对我的资源的访问。

- Leonardo Rignanese