本地网站运行正常，生产环境出现Content Security Policy错误求助

看起来你遇到的是典型的CSP限制内联资源的问题——本地开发时通常不会严格校验CSP规则，但生产环境会严格执行，所以就出现了报错。咱们一步步来搞定它：

先搞懂问题根源 #

控制台的提示已经说得很明确了：你的CSP只配置了default-src 'self'，而且没有显式声明style-src指令，所以所有样式相关的请求都会 fallback 到default-src的规则。而CSP默认是禁止内联样式的，这就是报错的原因。

三种可行解决方案，按需选择： #

1. 使用控制台给出的哈希值（最安全推荐） #

控制台已经帮你算出了那个内联样式的SHA256哈希值：sha256-mc5MFFuny++HbPmYE2clhmGeDbhhMCQG815PTPVKnzs=。你可以直接把它加到CSP的style-src规则里。

修改你的CSP头部（或者页面meta标签中的CSP配置），添加style-src指令：

default-src 'self'; style-src 'self' 'sha256-mc5MFFuny++HbPmYE2clhmGeDbhhMCQG815PTPVKnzs=';

这种方式的安全性最高，因为只有这个特定的内联样式会被允许，其他未知的内联样式依然会被拦截。

2. 使用Nonce（适合动态生成的内联内容） #

如果你的内联样式是动态生成的（比如每次加载内容都不一样），哈希值可能会变化，这时用Nonce更合适：

• 服务器端每次请求生成一个唯一的随机nonce值（比如一个随机字符串）
• 在CSP的style-src中添加'nonce-你的随机值'
• 同时在页面的内联<style>标签上加上nonce="你的随机值"属性

举个例子：
CSP头部配置：

default-src 'self'; style-src 'self' 'nonce-abc123xyz789';

对应的内联样式标签：

<style nonce="abc123xyz789">
/* 你的内联样式内容 */
</style>

注意：Nonce必须每次请求都重新生成，否则会失去安全防护的意义。

3. 临时使用'unsafe-inline'（仅测试用，不推荐） #

如果你只是临时测试，或者暂时没办法处理哈希/Nonce，可以用'unsafe-inline'绕过限制，但这会大幅降低CSP的安全性，不建议在正式生产环境长期使用：

default-src 'self'; style-src 'self' 'unsafe-inline';

React项目额外提示 #

如果你是用Create React App或类似的React脚手架，要注意排查内联样式的来源：

• 是不是自己手动在组件里添加了<style>标签？
• 有没有使用会生成内联样式的第三方库？

如果是第三方库导致的问题，建议查看库的官方文档，看看有没有CSP兼容的方案（比如是否支持生成外部样式表而非内联样式）。

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