已配置connect-src但Content Security Policy仍阻止请求的问题求助

我目前遇到了一个非常诡异的内容安全策略（CSP）问题，实在搞不懂哪里出了问题，想请教大家帮忙排查。

我用的是公开可访问的域名（以下用example.com做示例），并且已经在HTML里设置了对应的meta标签配置CSP：

<meta http-equiv="content-security-policy" content="default-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://example.com;">

可以看到我明确配置了connect-src 'self' https://example.com;，但当我用下面的fetch代码发起请求时：

const response = await fetch(baseUrl + generatePath, {
    method: 'POST',
    headers: {
        Authorization: 'Bearer 1234',
        'Content-Type': 'text/event-stream',
    },
    body: JSON.stringify(requestBody),
})

请求根本没被发送出去，浏览器控制台直接抛出了错误：

Refused to connect to 'https://example.com/api/generate' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

这就太奇怪了——我明明已经显式设置了connect-src啊！更离谱的是，本地运行在localhost:5173时请求能正常发出，但切换到localhost:3000就失败；部署到Azure后，从不同域名访问也会出现同样的问题。

我完全不知道该怎么解决，之前看过一些关于HTTP请求头的类似问题，但这里连请求都没发出去，Chrome和Opera浏览器都存在这个问题。有没有人遇到过类似情况，或者知道该从哪里入手排查？

备注：内容来源于stack exchange，提问作者Michał Turczyn