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

Question

问题

我有一个托管在firebase托管的flutter Web项目，该项目托管了用Canvaskit渲染的，我无法加载其加载外部图像，该图像托管在Xano CDN或加载Googleplaces API结果（自动编译）中。 我阅读了许多其他解决方案（例如 或 this or 或 thisis ），但无行。我也在Google Cloud Cloud 上配置了CORS。

我的文件

这是我的 firebase.json file：

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

了以下脚本：

<!-- 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>

在index.html中，我已经在＆lt;/body＆gt; tag之前附加 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),
  );

我尝试在Google Place Initializer中包括标题：

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

错误

这些是我从浏览器控制台中获得的错误类型：

无法加载资源：net :: err_blocked_by_client

或

访问xmlhttprequest at 'https://storage.googleapis.com/xatr-ly1x-gkt1.n7.xano.io/vault/xhl5_hu1/fmpw0ycx/c01_ng../9de15de15d31/monemento_ai_ai_ai_caduti_caduti_caduti_in_in_in_in_corsososososososososososososososososososososososososososososososososososososososososososososososososososososososososososososo.coropa.jpa （从 'https://xatr-ly1x-gkt1.n7.xano.io/vault/xhl5_hu1/fmpw0ycx/c01_ng../monumento_ai_ai_ai_caduti_in_corso_corso_corso_europa.jeuropa.jpg？ 从原点“ https://hearth-148b0.web.app”被CORS阻止 策略：没有“访问控制 - 允许孔”标头 请求的资源。

中部署

部署在Firebase上的命令

flutter build web
firebase deploy

从Android Studio：替代方案

这些是我用来

Header set Access-Control-Allow-Origin *

。

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

确保将 替换为您的存储桶的名称。

通过执行这些步骤，我能够解决 CORS 问题并启用对我的资源的访问。