同构/普遍呈现React 15应用程序中断Cloudflare HTTP代理("橙色云")
cha*_*doh 4 dns http-proxy cloudflare reactjs isomorphic-javascript
我有一个同构/通用React应用程序,这意味着它由服务器在服务器上呈现,为客户端,单页面应用程序用户体验提供支持.
我使用Cloudflare配置此应用程序的DNS,并使用其"橙色云"功能来加速和保护我的网站流量,如下图和支持文章中所述:
从链接到文章:"Cloudflare可以在两种模式下运行 - 仅限DNS(未使用;"灰色云")和作为HTTP代理("橙色云"),具有我们的安全性,CDN和性能功能."
我发现使用React 15和Cloudflare的"橙色云"HTTP代理功能运行我的应用程序会导致错误:
reactProdInvariant.js:31未捕获错误:Minified React错误#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的地址时,我没有得到这个错误,当我切换到"灰色云"以使用Cloudflare作为DNS服务时,我也没有得到它.
禁用服务器端呈现时,我不会遇到此问题.
当我谷歌链接到"实际"错误的文本时,我发现这个Github线程确认这与服务器端呈现有关.
但是,我的情况略有不同:线程的作者遇到错误,"无法找到元素"ID引用style标记,而在我的情况下,未展开的元素ID引用head标记.
当我谷歌生产"包装"错误的文本时,我发现这个Github线程确认这与Cloudflare的HTTP代理有关.此评论说:"如果您正在使用CloudFlare,请禁用HTML的自动缩小功能."
到目前为止,我无法弄清楚如何做到这一点.我很难找到关于Cloudflare究竟对HTTP代理做什么的好信息,以及我如何配置它.
问题:
- 为什么会发生这个错误？
- 我在哪里可以找到有关"橙色云"究竟是什么的信息？
- 在保持Cloudflare HTTP代理的优势的同时解决此问题的最佳方法是什么？
服务器上的React需要将应用程序呈现为对浏览器有意义的HTML字符串.同时,浏览器中的React需要阅读此HTML并理解它与JS代码的关系:它需要以非常详细的方式识别哪个DOM树来自哪个React组件.因此,实际上,中间HTML是服务器上的React和客户端上的React之间的序列化格式,即使在没有React的情况下,它也需要对浏览器有意义.
当您启用高级Cloudflare功能时,它会将HTML视为"常规"HTML,而不是花哨的服务器端呈现组件.我对一件可能出错的事情毫无根据的猜测是剥离HTML评论.一般来说,这对于缩小是很自然的事情.但是React使用HTML注释将<!-- empty -->占位符放在React组件返回的位置null.当然,剥离这些休息React.
Cloudflare可以以更低的成本更快地提供服务网站.他们有各种各样的工具来实现这一点,请参阅他们的介绍指南.缩小HTML是完全自然的,不幸的是它打破了你的用例,但这是我们得到的,当我们的HTML中没有严格定义节点和属性的含义以及在HTML中改变它们的灵活性时.
我认为现在最直接的方法是在Cloudflare设置中禁用HTML缩小.
| 归档时间： |
|
| 查看次数： |
1375 次 |
| 最近记录： |