同构/普遍呈现的用Cloudflare HTTP代理(“橙色云”)中断15个应用程序

Question

我有一个同构/通用的React应用程序，这意味着它是由相同的JS呈现给客户端的单一页面应用程序用户体验。

我使用Cloudflare配置这个应用程序的DNS，并使用他们的“橙色云”功能来加速和保护我的站点的流量，如下图和在他们的支持文章所解释

​

​

从链接到文章："Cloudflare可以在两种模式下工作- DNS (取消代理；‘灰色云’)和HTTP代理(‘橙色云’)，我们的安全性，CDN和性能特点。“

我发现使用React 15运行我的应用程序，Cloudflare的“橙色云”HTTP代理功能导致错误：

reactProdInvariant.js:31未知错误:最小化的React错误#32；访问http://facebook.github.io/react/docs/error-decoder.html?invariant=32&args[]=2获取完整消息，或者使用非小型化的dev环境获取全部错误和其他有用的警告。

链接到错误的文本：

找不到ID为2的元素。

这个ID可能引用我的页面的head标记：

<!doctype html>
<html lang="en-us" data-reactroot="" data-reactid="1" data-react-checksum="-1233854461"><head data-reactid="2">...

我不理解这个问题的反应14。

当我使用我的应用程序的原始的，using ed地址时，我没有得到这个bug，当我切换到“灰色云”来使用Cloudflare作为一个DNS服务时，我也没有得到这个bug。

当我禁用服务器端呈现时，我不会遇到这个问题。

当我搜索链接到“实际”错误的文本时，我发现这个Github线程确认这与服务器端呈现有关。

但是，我的情况略有不同:线程的作者遇到了一个“无法找到元素”ID来引用style标记的错误，而在我的示例中，未找到的元素ID是指head标记。

当我搜索产品“包装”错误的文本时，我发现这个Github线程确认这与Cloudflare的HTTP代理有关。这句话说：“如果你在使用CloudFlare，请禁用CloudFlare的自动缩小功能。”

到目前为止，我还不知道该怎么做。对于我来说，很难找到关于Cloudflare对他们的HTTP代理到底做了什么以及如何配置它的好信息。

问题：

• 为什么会发生这种错误？
• 我在哪里可以找到关于“橙色云”到底是做什么的信息？
• 在维护Cloudflare的HTTP代理的好处的同时，修复这个问题的最佳方法是什么？

Answer 1

服务器上的React需要将应用程序呈现给对浏览器有意义的HTML字符串。同时，浏览器中的relation需要读取这个HTML并了解它与您的JS代码的关系:它需要以非常详细的方式识别哪个DOM树来自哪个relation组件。因此，实际上，中间HTML是服务器上的React与客户端上的React之间的序列化格式，即使在没有React的情况下，也需要它对浏览器有意义。

当您启用高级Cloudflare功能时，它将HTML视为“常规”HTML，而不是高级服务器端呈现的组件。我对可能出错的一件事的毫无根据的推测就是去掉HTML注释。一般来说，这是一件很自然的事情。但是React使用HTML来放置一个<!-- empty -->占位符，其中React组件返回null。自然地，剥去这些断裂会产生反应。

Cloudflare是为了以更低的成本更快地为网站服务。他们有各种各样的工具来实现这一点，参见介绍指南。缩小HTML是完全自然的，不幸的是它破坏了您的用例，但是当在HTML中没有严格定义节点和属性的含义以及更改它们的灵活性时，这就是我们得到的结果。

我认为目前最直接的前进方式是在Cloudflare设置中禁用HTML小型化。