我正试图在从NodeJS/Express后端提供的React应用程序中加载化身图像。
我的内容安全策略设置为：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' s.gravatar.com; style-src 'self'; connect-src 'self'; ">
为了能够访问gravatar图像。
然而，当我在生产模式下运行React应用程序时，我在控制台中收到以下错误：
Refused to load the image 'https://s.gravatar.com/avatar/a57b7e3be28e9bf9b245a409b4666ee3?s=200&r=pg&d=mm' because it violates the following Content Security Policy directive: "img-src 'self' data:".
在页面上查看源代码清楚地表明img src策略设置正确：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' s.gravatar.com; style-src 'self'; connect-src 'self'; ">
我在Chrome和Firefox中都尝试过，但我收到了同样的问题，图像被屏蔽了。
请让我知道我可能做错了什么。
我意识到了我的错误！我在NodeJS后端使用helmet，它覆盖了前端指定的CSP。
我不认为它会对前端产生影响，但似乎它优先。
希望这能为其他人的调查节省一些时间。