Blazor中HttpClient调用外部API失败，违反内容安全政策求助

1. 修复Content Security Policy（CSP）配置 #

你的CSP未声明connect-src指令，浏览器会默认沿用default-src 'self'的规则，导致跨域请求api.chucknorris.io被拦截。需要在CSP中添加connect-src，明确允许访问目标API域名：

修改后的CSP meta标签如下：

<meta http-equiv="Content-Security-Policy"
      content="base-uri 'self';
               block-all-mixed-content;
               default-src 'self';
               connect-src http://api.chucknorris.io https://api.chucknorris.io;
               img-src data: https:;
               object-src 'none';
               script-src 'self'
                          'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='
                          'unsafe-eval';
               style-src 'self'
                         'unsafe-inline';
               upgrade-insecure-requests;">

2. 优化API请求URL（推荐） #

你配置了upgrade-insecure-requests，浏览器会自动将HTTP请求升级为HTTPS。由于api.chucknorris.io支持HTTPS，建议直接使用HTTPS版本的URL，避免潜在的协议转换问题：

var url = new Uri("https://api.chucknorris.io/jokes/random");

3. Blazor HttpClient使用优化（可选） #

在Blazor WebAssembly中，手动实例化HttpClient并非最佳实践，推荐通过依赖注入获取框架管理的HttpClient，同时建议反序列化JSON响应以获取实际笑话内容：

@inject HttpClient HttpClient

@page "/"
<PageTitle>Index</PageTitle>
<br />
<h4>Joke of the day:</h4>
<p>@joke</p>

@code{
    string joke = "No Joke";

    protected override async Task OnInitializedAsync(){
        var url = "https://api.chucknorris.io/jokes/random";
        try
        {
            var jokeData = await HttpClient.GetFromJsonAsync<JokeResponse>(url);
            joke = jokeData?.Value ?? "No Joke";
        }
        catch (Exception e)
        {
            Console.WriteLine("Failed to get the joke. Error: ", e.Message);            
            joke = "No Joke";
        }
    }

    private class JokeResponse
    {
        public string Value { get; set; }
    }
}

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