我有一个同构/通用React应用程序，这意味着它由服务器在服务器上呈现，为客户端，单页面应用程序用户体验提供支持 .
我配置此应用程序's DNS using Cloudflare, and use their 1875538 feature to accelerate and protect my site'的流量，如下图和in their support article所述：
从链接到文章：“Cloudflare可以在两种模式下运行 - 仅限DNS（未使用;”灰色 Cloud “）和作为HTTP代理（”橙色 Cloud “），具有我们的安全性，CDN和性能功能 . ”
我发现使用React 15和Cloudflare的“橙色 Cloud ”HTTP代理功能运行我的应用程序会导致错误：
reactProdInvariant.js：31 Uncaught Error：Minified React error＃32;访问http://facebook.github.io/react/docs/error-decoder.html?invariant=32&args[]=2获取完整的消息，或使用非缩小的开发环境获取完整错误和其他有用的警告 .
链接错误的文本：
无法找到ID为2的元素 .
此ID可能是指我页面的 head 标记：
<!doctype html>
<html lang="en-us" data-reactroot="" data-reactid="1" data-react-checksum="-1233854461"><head data-reactid="2">...
我不会在React 14中遇到这个问题 .
当我使用我的应用程序的原始的，未DNS的地址时，我没有得到这个错误，当我切换到“灰色 Cloud ”以使用Cloudflare作为DNS服务时，我也没有得到它 .
禁用服务器端呈现时，我不会遇到此问题 .
当我谷歌链接到"actual"错误的文本时，我发现this Github thread确认这与服务器端渲染有关 .
但是，我的情况稍有不同：该线程的作者遇到错误，其中"unable to find element" ID引用 style 标记，而在我的情况下，未展开的元素ID引用 head 标记 .
当我谷歌 生产环境 "wrapped"错误的文本时，我发现this Github thread确认这与Cloudflare的HTTP代理有关 . This comment说："If you're using CloudFlare, please disable auto-minification of HTML."
到目前为止，我无法弄清楚如何做到这一点 . 我很难找到关于Cloudflare究竟对HTTP代理做什么的好信息，以及我如何配置它 .
问题：
-
为什么会发生这个错误？
-
哪里可以找到有关"orange cloud"究竟是什么的信息？
-
在保持Cloudflare HTTP代理的优势的同时解决此问题的最佳方法是什么？
1 回答
服务器上的React需要将应用程序呈现为对浏览器有意义的HTML字符串 . 同时，浏览器中的React需要阅读此HTML并理解它与JS代码的关系：它需要以非常详细的方式识别哪个DOM树来自哪个React组件 . 因此，实际上，中间HTML是服务器上的React和客户端上的React之间的序列化格式，即使在没有React的情况下，它也需要对浏览器有意义 .
当您启用高级Cloudflare功能时，它会将HTML视为“常规”HTML，而不是花哨的服务器端呈现组件 . 我对一件可能出错的事情毫无根据的猜测是剥离HTML评论 . 一般来说，这对于缩小是很自然的事情 . 但是React使用HTML注释将
<!-- empty -->占位符放在React组件返回null的位置 . 当然，剥离这些休息React .Cloudflare可以以更低的成本更快地提供服务网站 . 他们有各种各样的工具来实现这一目标，参见their introduction guide . 缩小HTML是完全自然的，不幸的是它打破了你的用例，但这是我们得到的，当我们的HTML中没有严格定义节点和属性的含义以及在HTML中改变它们的灵活性时 .
我认为现在最直接的方式是disable HTML minification in Cloudflare settings .