React项目CSP报错拒绝加载blob资源，webpack配置后仍无效如何修复？

错误原因 #

你的项目当前配置的内容安全策略（CSP）未将blob:协议加入允许的源列表，浏览器出于安全规则拦截了blob类型的worker和图片资源。

修复步骤 #

1. 修改webpack.config.json的devServer配置，添加自定义响应头补全CSP规则，完整配置如下：

devServer:{
  https: true,
  historyApiFallback: true,
  // 新增headers配置
  headers: {
    "Content-Security-Policy": "default-src 'self' https: localhost:*; script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*; img-src 'self' https: localhost:* blob:; worker-src 'self' https: localhost:* blob:;"
  }
}

2. 检查项目入口HTML文件的<head>标签，确认没有额外设置Content-Security-Policy的meta标签。如果存在该标签，需要在对应规则中补充img-src blob:和worker-src blob:。
3. 重启webpack devServer，刷新页面即可验证修复效果。

注意：以上CSP规则仅适用于本地开发环境，生产环境请根据实际业务需求调整安全策略，避免开放不必要的权限。

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