React项目npm run build后iframe无法正常显示，该如何解决？

以下是针对你遇到的「开发环境iframe正常，生产构建后无法显示」问题的排查步骤和解决方案：

• 先看控制台错误：打开构建后的页面，按F12打开开发者工具，切换到Console标签，查看是否有跨域、CSP（内容安全策略）或资源加载失败的报错，这是最快定位问题的方式。

• 验证iframe的src是否正确：找到构建生成的index.html文件，查看其中iframe的src属性是否和代码里的https://codesandbox.io/embed/q7jmjyplvq?fontsize=14完全一致，确认没有被构建工具误修改或转义。

• 调整sandbox权限：尝试给iframe的sandbox属性添加allow-top-navigation权限，或者暂时移除sandbox属性测试（测试后再恢复合适的权限保障安全），修改后的代码示例：

<iframe 
  src={sample_url} 
  id="iframeid" 
  title="Plotly All Graph Types" 
  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" 
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin allow-top-navigation"
></iframe>

• 检查CSP配置：如果项目配置了内容安全策略（比如index.html的meta标签或服务器配置），需要添加允许加载codesandbox的规则。在index.html的head标签中添加：

<meta http-equiv="Content-Security-Policy" content="frame-src https://codesandbox.io;">

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