Flutter Web App，CORS 阻止图像加载

Question

我正在使用 Flutter 开发一个购物 Web 应用程序，该应用程序从我使用 ASP .Net Core 编写的 API 获取产品数据项，对于产品图像，我使用 xampp 来提供图像 url，而不是使用原始图像。我使用以下代码修复了数据 API 中的 CORS 问题：

app.UseCors(builder => builder.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://example:port"));

但是，从应用程序内加载图像时我仍然遇到 CORS 问题 这是我检查调试控制台后得到的结果：

从源“http://example:port”获取“http://example:port/img/OIP.jpg”的访问已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头存在于所请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源

这是我迄今为止尝试过的：

• 安装了禁用 CORS 的 chrome 扩展，但不起作用。
• 使用以下命令运行 google chrome：

chrome.exe --user-data-dir="C://chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials'

它工作得很好，但这不是最好的解决方案

Answer 1

在 Chrome 中禁用安全性可以在调试过程中提供帮助，但这对于生产来说不是一个可行的解决方案，所以我不推荐它。

在许多情况下，可以通过将 Web 渲染器更改为

html

来解决问题。您可以通过使用

--web-renderer html

标志运行项目来完成此操作。然而，根据我的经验，有时事实恰恰相反。使用

--web-renderer canvaskit

运行项目可能会解决该问题。因此，我建议尝试这两种选择。

如果您有特定原因坚持使用无法解决问题的渲染器（例如，Lottie 文件要求项目使用

canvaskit

渲染器才能正常运行），另一种选择是将图像作为 Base64 发送来自后端服务器的字符串。然后，在 Flutter 应用程序中，您可以使用

base64Decode

库中的

dart:convert

函数解码 Base64 字符串并将其转换回图像字节：

import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';

// Example of decoding a Base64 string and displaying the image
Uint8List imageBytes = base64Decode('<your-base64-string-here>');
Image.memory(imageBytes);

这种方法消除了 CORS 问题，因为图像数据直接在响应中发送，不需要单独的网络请求来加载图像。

更多详细信息，您可以参考Flutter关于CORS和Web图像的文档。您还可以在此 StackOverflow 帖子中找到其他解决方案和讨论。