我使用Cloudflare配置此应用程序的DNS,并使用其“橙色云”功能来加速和保护我的网站流量,如下图和in their support article中所述：
从链接到文章：“Cloudflare可以在两种模式下运行 – 仅限DNS(未使用;”灰色云“)和作为HTTP代理(”橙色云“),具有我们的安全性,CDN和性能功能.
我发现使用React 15和Cloudflare的“橙色云”HTTP代理功能运行我的应用程序会导致错误：
reactProdInvariant.js:31 Uncaught Error: Minified React error #32; visit 07002 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
链接错误的文本：
Unable to find element with 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地址时没有遇到此错误,当我切换到“灰色云”以使用Cloudflare作为DNS服务时,我也没有得到它.
禁用服务器端呈现时,我不会遇到此问题.
当我谷歌链接到“实际”错误的文本时,我发现this Github thread确认这与服务器端呈现有关.
但是,我的情况稍有不同：该线程的作者遇到错误,其中“无法找到元素”ID引用样式标记,而在我的情况下,未展开的元素ID引用头标记.
当我谷歌生产“包装”错误的文本时,我发现this Github thread确认这与Cloudflare的HTTP代理有关. This comment说：“如果你正在使用CloudFlare,请禁用自动缩小HTML.”
到目前为止,我无法弄清楚如何做到这一点.我很难找到关于Cloudflare究竟对HTTP代理做什么的好信息,以及我如何配置它.
问题：
>为什么会发生这个错误？
>我在哪里可以找到有关“橙云”究竟是什么的信息？
>在保持Cloudflare HTTP代理的优势的同时解决此问题的最佳方法是什么？
当您启用高级Cloudflare功能时,它会将HTML视为“常规”HTML,而不是花哨的服务器端呈现组件.我对一件可能出错的事情毫无根据的猜测是剥离HTML评论.一般来说,这对于缩小是很自然的事情.但是React使用HTML注释来放置一个<！ - empty - >占位符,其中React组件返回null.当然,剥离这些休息React.
Cloudflare可以以更低的成本更快地提供服务网站.他们有各种各样的工具来实现这一点,参见their introduction guide.缩小HTML是完全自然的,不幸的是它打破了你的用例,但这就是我们得到的节点和属性的含义以及在我们的HTML中改变它们的灵活性没有严格定义.
我认为现在最直接的方式是disable HTML minification in Cloudflare settings.