我无法通过 API 调用从其他域加载 Flutter Web 中的网络图像。收到此错误
试图从另一个域加载图像？在以下位置找到答案： https://flutter.dev/docs/development/platform-integration/web-images ImageCodecException: 加载网络图片失败。
有什么帮助吗？
【问题讨论】：
标签： flutter flutter-web
为了能够在 Flutter 网页上显示来自任何其他域或 Firebase 存储的图像，您必须为 CORS 配置数据。
打开GCP console，选择您的项目并通过单击顶部导航栏中的>_ 图标按钮启动云终端会话。
点击打开编辑器按钮（铅笔图标），然后创建cors.json 文件。
cors.json 文件应如下所示：
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
我将原点设置为*，这意味着每个网站都可以显示您的图像。但您也可以在此处插入您网站的域来限制访问。
gsutil cors set cors.json gs://your-bucket
如果您需要更多信息：https://cloud.google.com/storage/docs/configuring-cors
【讨论】：
gsutil cors get gs://your-bucket
有两种方法可以解决此问题，使用 HTML 渲染运行您的应用程序或设置 CORS 配置。
CORS 是浏览器用来控制一个站点如何访问另一个站点的资源的一种机制。它的设计是这样的，默认情况下，一个网站不允许使用 XHR 或 fetch 向另一个网站发出 HTTP 请求。这可以防止另一个站点上的脚本代表用户执行操作，并在未经许可的情况下访问另一个站点的资源
当使用
、
或
Flutter 有两个 web 渲染器，canvaskit 和 html 当您在 Flutter Web 上运行/构建应用程序时，它会使用基于其运行设备的渲染器。
HTML 渲染器：当应用在移动浏览器中运行时。
CanvasKit 渲染器：当应用在桌面浏览器中运行时。
自动（默认） - 自动选择要使用的渲染器。
HTML 渲染器无需额外配置即可加载跨域图像。 因此您可以使用这些命令来运行和构建应用程序。
flutter run -d chrome --web-renderer html // to run the app
flutter build web --web-renderer html --release // to generate a production build
来源：https://docs.flutter.dev/development/tools/web-renderers
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
gcloud init // 位于 google-cloud-sdk/bin 中gsutil cors set cors.json gs://<your-bucket-name>.appspot.com你可以在firebase storage中找到你的bucket名称。【讨论】：
我通过使用 html 渲染器解决了这个问题
flutter build web --release --web-renderer html
或
flutter run --web-renderer html
【讨论】：
对我来说flutter run -d chrome --web-renderer html 工作。
【讨论】：
flutter build web --web-renderer html
如果您使用 Firebase 存储，请按照以下步骤操作：
[ { "origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600 } ]
**
gsutil cors set cors.json gs://bucket-name
**
bucket-name 是存储桶的名称，您可以在 firebase 项目的存储部分文件夹上方找到该名称
【讨论】：
如果您无法更新 CORS 设置或添加代理，请选择 CanvasKit（性能更好）而不是 HTML 渲染器 - 可以使用 platform view 显示图像：
import 'dart:html';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
class MyImage extends StatelessWidget {
@override
Widget build(BuildContext context) {
String imageUrl = "image_url";
// https://github.com/flutter/flutter/issues/41563
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
imageUrl,
(int _) => ImageElement()..src = imageUrl,
);
return HtmlElementView(
viewType: imageUrl,
);
}
}
【讨论】：
它似乎通过运行flutter run --web-renderer html解决了我的问题
【讨论】：
只需在 web 文件夹中添加 cors.json
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
【讨论】：
有两种方法可以解决这个问题：
1- 只需使用 flutter run -d chrome --web-renderer html
运行您的 Flutter Web但是，当您将画布视图渲染为 HTML 视图时，会出现一个问题。因此，您的所有视图（例如图像，文本等）都变得模糊（质量差）。如果您牺牲质量，请继续使用第一个解决方案。
app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept" ); next(); });
所以，我选择了第二种解决方案，因为我不牺牲质量。因此，我为您提供了我的后端屏幕截图，以便您更好地理解希望您找到了解决方案。
【讨论】：
对于使用 Slim 框架的人，只需在该文件夹上创建一个 .htaccess 文件用于存储图像并放入这行代码
Header set Access-Control-Allow-Origin *
【讨论】：
我从其他域加载内容时遇到问题，我无法控制从服务器端更改 cors 设置。我找到了解决这个问题的方法。
步骤 1：转到 C:\src\flutter\packages\flutter_tools\lib\src\web 或从您的 Flutter 根目录导航到 flutter\packages\flutter_tools\lib\src\web。
第 2 步：在文本编辑器中打开 chrome.dart。
第三步：在'--disable-extensions'点赞下添加'--disable-web-security'作为保存文件。
第 4 步：在您的项目文件夹中运行 flutter clean 并运行应用程序。
希望这对你有用。
我还没有在生产中测试我的应用程序。添加此标志也可能会导致一些安全问题。
【讨论】：