isomorphic/universally-rendered React 15 应用程序与 Cloudflare HTTP 代理中断 ("orange cloud")
isomorphic/universally-rendered React 15 app breaks with Cloudflare HTTP Proxy ("orange cloud")
我有一个 isomorphic/universal React 应用程序，这意味着它由支持客户端单页应用程序用户体验的相同 JS 在服务器上呈现。
我使用 Cloudflare 配置此应用的 DNS，并使用其 "orange cloud" 功能来加速和保护我网站的流量，如下图和 in their support article:
中所述
来自链接文章："Cloudflare can operate in two modes - DNS only (unproxied; 'grey cloud') and as a HTTP proxy ('orange cloud') with our security, CDN & performance features."
我发现 运行 我的应用程序与 React 15 和 Cloudflare 的 "orange cloud" HTTP 代理功能导致错误：
reactProdInvariant.js:31 Uncaught Error: Minified React error #32; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=32&args[]=2 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 编辑的地址时没有遇到此错误，当我切换到 "grey cloud" 仅将 Cloudflare 用作 DNS 服务时也没有遇到此错误。
当我禁用服务器端渲染时，我没有遇到这个问题。
当我 google 链接到 "actual" 错误的文本时，我发现 this Github thread 确认这与服务器端渲染有关。
然而，我的情况略有不同：该线程的作者遇到错误，其中 "unable to find element" ID 引用 style 标签，而在我的情况下，未找到的元素 ID 引用 head标签。
当我google的文本制作"wrapped"错误时，我发现this Github thread that confirms that this has something to do with Cloudflare's HTTP Proxy. This comment说："If you're using CloudFlare, please disable auto-minification of HTML."
到目前为止，我不知道该怎么做。我很难找到关于 Cloudflare 使用他们的 HTTP 代理到底做了什么，以及我如何配置它的好信息。
问题：
- 为什么会出现这个错误？
- 在哪里可以找到有关 "orange cloud" 的确切功能的信息？
- 在保持 Cloudflare 的 HTTP 代理优势的同时解决此问题的最佳方法是什么？
服务器上的 React 需要将应用程序呈现为对浏览器有意义的 HTML 字符串。同时，浏览器中的 React 需要读取这个 HTML 并理解它与你的 JS 代码的关系：它需要以非常详细的方式识别哪个 DOM 树来自哪个 React 组件.因此，实际上，中间 HTML 是服务器上的 React 和客户端上的 React 之间的序列化格式，即使在没有 React 的情况下，它对浏览器也有额外的要求。
当您启用高级 Cloudflare 功能时，它会将 HTML 视为“常规”HTML，而不是花哨的服务器端渲染组件。我毫无根据地猜测可能会出错的一件事是删除 HTML 评论。通常，对于缩小来说，这是很自然的事情。但是 React 使用 HTML 注释在 React 组件 returns null 的位置放置一个 <!-- empty --> 占位符。自然地，剥离这些中断 React.
Cloudflare 旨在以更低的成本更快地提供网站服务。他们有各种各样的工具来实现这一目标，请参阅 their introduction guide。缩小 HTML 是完全自然的，不幸的是它破坏了您的用例，但这是当节点和属性的含义以及在我们的 HTML 中更改它们的灵活性没有严格定义时我们得到的结果。
我认为你现在最直接的前进方式是disable HTML minification in Cloudflare settings。
我有一个 isomorphic/universal React 应用程序，这意味着它由支持客户端单页应用程序用户体验的相同 JS 在服务器上呈现。
我使用 Cloudflare 配置此应用的 DNS，并使用其 "orange cloud" 功能来加速和保护我网站的流量，如下图和 in their support article:
中所述来自链接文章："Cloudflare can operate in two modes - DNS only (unproxied; 'grey cloud') and as a HTTP proxy ('orange cloud') with our security, CDN & performance features."
我发现 运行 我的应用程序与 React 15 和 Cloudflare 的 "orange cloud" HTTP 代理功能导致错误：
reactProdInvariant.js:31 Uncaught Error: Minified React error #32; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=32&args[]=2 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 编辑的地址时没有遇到此错误，当我切换到 "grey cloud" 仅将 Cloudflare 用作 DNS 服务时也没有遇到此错误。
当我禁用服务器端渲染时，我没有遇到这个问题。
当我 google 链接到 "actual" 错误的文本时，我发现 this Github thread 确认这与服务器端渲染有关。
然而，我的情况略有不同：该线程的作者遇到错误，其中 "unable to find element" ID 引用 style 标签，而在我的情况下，未找到的元素 ID 引用 head标签。
当我google的文本制作"wrapped"错误时，我发现this Github thread that confirms that this has something to do with Cloudflare's HTTP Proxy. This comment说："If you're using CloudFlare, please disable auto-minification of HTML."
到目前为止，我不知道该怎么做。我很难找到关于 Cloudflare 使用他们的 HTTP 代理到底做了什么，以及我如何配置它的好信息。
问题：
- 为什么会出现这个错误？
- 在哪里可以找到有关 "orange cloud" 的确切功能的信息？
- 在保持 Cloudflare 的 HTTP 代理优势的同时解决此问题的最佳方法是什么？
服务器上的 React 需要将应用程序呈现为对浏览器有意义的 HTML 字符串。同时，浏览器中的 React 需要读取这个 HTML 并理解它与你的 JS 代码的关系：它需要以非常详细的方式识别哪个 DOM 树来自哪个 React 组件.因此，实际上，中间 HTML 是服务器上的 React 和客户端上的 React 之间的序列化格式，即使在没有 React 的情况下，它对浏览器也有额外的要求。
当您启用高级 Cloudflare 功能时，它会将 HTML 视为“常规”HTML，而不是花哨的服务器端渲染组件。我毫无根据地猜测可能会出错的一件事是删除 HTML 评论。通常，对于缩小来说，这是很自然的事情。但是 React 使用 HTML 注释在 React 组件 returns null 的位置放置一个 <!-- empty --> 占位符。自然地，剥离这些中断 React.
Cloudflare 旨在以更低的成本更快地提供网站服务。他们有各种各样的工具来实现这一目标，请参阅 their introduction guide。缩小 HTML 是完全自然的，不幸的是它破坏了您的用例，但这是当节点和属性的含义以及在我们的 HTML 中更改它们的灵活性没有严格定义时我们得到的结果。
我认为你现在最直接的前进方式是disable HTML minification in Cloudflare settings。