Blazor WebAssembly用HttpClient请求图片转Base64报Failed to fetch如何解决

Blazor WebAssembly运行在浏览器沙箱环境中，所有网络请求都受浏览器规则约束，该异常通常由以下几个原因导致：

• 跨域限制：如果请求的图片URL与你的Blazor应用部署的域名、协议、端口任意一项不一致，就属于跨域请求。只要目标资源服务器没有配置CORS规则允许你的站点访问，浏览器就会直接拦截请求，抛出TypeError: Failed to fetch。
• 手动实例化HttpClient错误：不要直接通过new HttpClient()创建客户端实例，托管模式下默认通过依赖注入提供的HttpClient已经完成了基地址、请求适配等默认配置，手动创建的实例缺少这些配置，会导致请求无法正常发出。
• 混源请求拦截：如果你的Blazor站点使用HTTPS协议部署，但请求的图片URL是HTTP协议，浏览器会默认拦截这类不安全的混源请求，也会触发该异常。
• 相对路径错误：如果使用的是相对路径请求本站点内的图片，手动创建的HttpClient没有配置正确的基地址，会导致请求路径错误，触发请求失败。

1. 改用依赖注入的HttpClient实例 #

在Blazor组件或者服务中通过构造函数注入框架提供的HttpClient，不要手动实例化：

// Razor组件中注入示例
@inject HttpClient Http

// 自定义服务中注入示例
public class ImageService
{
    private readonly HttpClient _httpClient;
    public ImageService(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    public async Task<string> GetImageBase64Async(string url)
    {
        var bytes = await _httpClient.GetByteArrayAsync(url);
        return Convert.ToBase64String(bytes);
    }
}

2. 解决跨域问题 #

如果确认是跨域导致的请求失败，可根据实际场景选择方案：

• 如果你拥有目标图片服务器的控制权，在服务器上配置CORS规则，允许你的Blazor应用的域名访问图片资源。
• 如果你无法控制目标服务器，可通过托管模式的后端服务做代理转发：前端请求你的后端接口，由后端服务拉取图片字节流后返回给前端，绕过浏览器跨域限制。

3. 修复混源问题 #

确保请求的图片URL与你的Blazor站点使用的协议一致，优先使用HTTPS协议的图片资源，避免浏览器拦截混源请求。

4. 修正资源路径 #

如果请求的是本站点内的图片，使用正确的相对路径，不需要携带域名和协议前缀，注入的HttpClient会自动拼接正确的基地址。

内容的提问来源于stack exchange，提问作者T0bi