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

Question

问题

我有一个托管在使用 CanvasKit 渲染的 Firebase Hosting 上的 Flutter Web 项目，但我无法使其加载 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

或者

访问“https://storage.googleapis.com/xatr-ly1x-gkt1.n7.xano.io/vault/xhL5_hu1/fMPW0YCx/C01_Ng../9de15d31/Monumento_ai_caduti_in_Corso_Europa.jpg”处的 XMLHttpRequest（重定向自“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 *

但没有成功。

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 问题并允许访问我的资源。