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

Question

问题

我有一个Flutter Web项目托管在Firebase Hosting上，用CanvasKit渲染，我无法加载Xano CDN中托管的外部图像或加载GooglePlaces API结果(自动编译(。我读过很多其他的解决方案(比如这个、这个或这个(，但都不起作用。我还在谷歌云上配置了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"标头请求的资源。

部署

这些是我用来部署在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问题，并允许访问我的资源。