React前端空白且CSP阻止eval，Nginx配置无效问题求助

针对你遇到的React前端空白、CSP阻止eval且Nginx配置不生效的问题，我整理了几个核心排查和解决方向，你可以逐一尝试：

1. 解决多个CSP头的冲突问题 #

你在Nginx配置中添加了两个独立的Content-Security-Policy头，这是关键问题之一：浏览器在收到多个CSP头时，会自动应用所有规则的最严格交集，导致你添加的'unsafe-eval'被另一个无该指令的配置覆盖，最终还是阻止了eval的执行。

请删除其中一个配置，合并成一个符合需求的CSP规则，示例配置如下（适配你的React环境）：

add_header Content-Security-Policy "default-src 'self'; 
  script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net https://code.jquery.com; 
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; 
  font-src 'self' https://fonts.gstatic.com; 
  img-src 'self' data: https:; 
  connect-src 'self' https://api.example.com ws://localhost:3000 http://localhost:3000;";

注意：Nginx中配置多行指令时，要确保每行末尾用反斜杠\续行，或者直接写成单行；同时检查引号是否正确转义，避免语法错误。

2. 确认Nginx头的作用域是否正确 #

Nginx的add_header指令存在作用域优先级：如果在server块下添加了头，但在某个location块中也定义了add_header，那么location块的配置会覆盖server块的。

请检查：

• 你的React静态文件（比如/static/路径）对应的location块中，是否有独立的add_header配置，导致CSP头被覆盖；
• 确保CSP头配置在最顶层的server块，或者在所有需要的location块中统一配置。

3. 清除浏览器缓存，验证CSP头是否生效 #

浏览器可能缓存了之前的CSP规则，导致新的Nginx配置没有立即生效。你可以：

• 用Ctrl+Shift+R强制刷新页面；
• 打开Chrome DevTools的「Network」面板，勾选「Disable cache」选项后刷新页面；
• 在「Network」面板中找到index.html请求，查看「Response Headers」中的Content-Security-Policy字段，确认是否和你配置的一致。

4. 检查是否存在其他CSP配置来源 #

除了Nginx的响应头，还有两个地方可能设置了CSP，导致冲突：

• React的public/index.html：检查是否有<meta http-equiv="Content-Security-Policy" content="...">标签，如果有，要么删除它，要么让它的配置和Nginx完全一致；
• FastAPI后端：检查后端是否在响应中返回了CSP头，如果有的话，需要和Nginx的配置合并，或者只保留一处配置。

5. 验证React构建是否引入了eval #

如果是生产环境的React构建，默认情况下不应该出现eval调用，但某些依赖库或特殊的构建选项可能会引入eval。你可以：

• 查看static/js/main.xxx.js文件，搜索是否有eval、new Function()等关键词，确认是React本身还是第三方依赖导致的；
• 如果是开发模式下的问题（比如用react-scripts start启动的本地服务），React的热重载机制确实会用到eval，这时候需要在CSP中明确允许'unsafe-eval'。

如果以上步骤都尝试后仍未解决，你可以在Chrome DevTools的「Console」面板中查看更详细的CSP错误信息（点击错误提示中的展开按钮），确认具体是哪条指令阻止了eval的执行，再针对性调整CSP规则。

内容来源于stack exchange