如何从ServerSideRender获得更重要的错误响应

时间:2020-06-05 作者:JohnRDOrazio

我正在开发一个古腾堡区块的ServerSideRender组件。我在(未)渲染块中看到此错误:Error loading block: The response is not a valid JSON response.但是在哪里可以看到实际的JSON响应呢?

在Chrome Inspector工具中,我看到:

加载资源失败:服务器响应状态为502()

连同发送的请求以及所有块属性:

https://www.bibleget.io/wp-json/wp/v2/block-renderer/bibleget/bible-quote?context=edit&attributes%5BPARAGRAPHSTYLES_FONTFAMILY%5D=Times%20New%20Roman&attributes%5BPARAGRAPHSTYLES_LINEHEIGHT%5D=1.5&attributes%5BPARAGRAPHSTYLES_PADDINGTOPBOTTOM%5D=8&attributes%5BPARAGRAPHSTYLES_PADDINGLEFTRIGHT%5D=17&attributes%5BPARAGRAPHSTYLES_MARGINTOPBOTTOM%5D=24&attributes%5BPARAGRAPHSTYLES_MARGINLEFTRIGHT%5D=14&attributes%5BPARAGRAPHSTYLES_MARGINLEFTRIGHTUNIT%5D=auto&attributes%5BPARAGRAPHSTYLES_PARAGRAPHALIGN%5D=4&attributes%5BPARAGRAPHSTYLES_WIDTH%5D=85&attributes%5BPARAGRAPHSTYLES_NOVERSIONFORMATTING%5D=false&attributes%5BPARAGRAPHSTYLES_BORDERWIDTH%5D=4&attributes%5BPARAGRAPHSTYLES_BORDERCOLOR%5D=%230b02ac&attributes%5BPARAGRAPHSTYLES_BORDERSTYLE%5D=3&attributes%5BPARAGRAPHSTYLES_BORDERRADIUS%5D=12&attributes%5BPARAGRAPHSTYLES_BACKGROUNDCOLOR%5D=%23fdfbf7&attributes%5BVERSIONSTYLES_BOLD%5D=true&attributes%5BVERSIONSTYLES_ITALIC%5D=true&attributes%5BVERSIONSTYLES_UNDERLINE%5D=false&attributes%5BVERSIONSTYLES_STRIKETHROUGH%5D=false&attributes%5BVERSIONSTYLES_TEXTCOLOR%5D=%23000096&attributes%5BVERSIONSTYLES_FONTSIZE%5D=9&attributes%5BVERSIONSTYLES_FONTSIZEUNIT%5D=inherit&attributes%5BVERSIONSTYLES_VALIGN%5D=3&attributes%5BBOOKCHAPTERSTYLES_BOLD%5D=true&attributes%5BBOOKCHAPTERSTYLES_ITALIC%5D=false&attributes%5BBOOKCHAPTERSTYLES_UNDERLINE%5D=false&attributes%5BBOOKCHAPTERSTYLES_STRIKETHROUGH%5D=false&attributes%5BBOOKCHAPTERSTYLES_TEXTCOLOR%5D=%2302813d&attributes%5BBOOKCHAPTERSTYLES_FONTSIZE%5D=9&attributes%5BBOOKCHAPTERSTYLES_FONTSIZEUNIT%5D=em&attributes%5BBOOKCHAPTERSTYLES_VALIGN%5D=3&attributes%5BVERSENUMBERSTYLES_BOLD%5D=false&attributes%5BVERSENUMBERSTYLES_ITALIC%5D=false&attributes%5BVERSENUMBERSTYLES_UNDERLINE%5D=false&attributes%5BVERSENUMBERSTYLES_STRIKETHROUGH%5D=false&attributes%5BVERSENUMBERSTYLES_TEXTCOLOR%5D=%23ee0000&attributes%5BVERSENUMBERSTYLES_FONTSIZE%5D=7&attributes%5BVERSENUMBERSTYLES_FONTSIZEUNIT%5D=em&attributes%5BVERSENUMBERSTYLES_VALIGN%5D=1&attributes%5BVERSETEXTSTYLES_BOLD%5D=false&attributes%5BVERSETEXTSTYLES_ITALIC%5D=false&attributes%5BVERSETEXTSTYLES_UNDERLINE%5D=false&attributes%5BVERSETEXTSTYLES_STRIKETHROUGH%5D=false&attributes%5BVERSETEXTSTYLES_TEXTCOLOR%5D=%23706e6e&attributes%5BVERSETEXTSTYLES_FONTSIZE%5D=8&attributes%5BVERSETEXTSTYLES_FONTSIZEUNIT%5D=em&attributes%5BVERSETEXTSTYLES_VALIGN%5D=3&attributes%5BLAYOUTPREFS_SHOWBIBLEVERSION%5D=true&attributes%5BLAYOUTPREFS_BIBLEVERSIONALIGNMENT%5D=2&attributes%5BLAYOUTPREFS_BIBLEVERSIONPOSITION%5D=1&attributes%5BLAYOUTPREFS_BIBLEVERSIONWRAP%5D=2&attributes%5BLAYOUTPREFS_BOOKCHAPTERALIGNMENT%5D=1&attributes%5BLAYOUTPREFS_BOOKCHAPTERPOSITION%5D=1&attributes%5BLAYOUTPREFS_BOOKCHAPTERWRAP%5D=1&attributes%5BLAYOUTPREFS_BOOKCHAPTERFORMAT%5D=3&attributes%5BLAYOUTPREFS_BOOKCHAPTERFULLQUERY%5D=false&attributes%5BLAYOUTPREFS_SHOWVERSENUMBERS%5D=true&attributes%5BVERSION%5D%5B0%5D=LUZZI&attributes%5BVERSION%5D%5B1%5D=NVBSE&attributes%5BQUERY%5D=Lc10%2C1-16&attributes%5BPOPUP%5D=false&attributes%5BFORCEVERSION%5D=false&attributes%5BFORCECOPYRIGHT%5D=false&post_id=1178&lang=it&_locale=user
所有属性看起来都是正确的,在PHP渲染回调中处理它们的方式看起来也是正确的。我有ServerSideRender 一直工作到昨天,现在突然出现了这个“无效JSON响应错误”。

我还没有对PHP中的渲染回调进行任何更改。我甚至已经完成了渲染回调PHP函数,以确保它正确接收所有属性并正确处理它们,我已经验证了这一点。我有一个将写入调试的函数。txt文件,我已逐步执行渲染回调,确保每个条件都正常工作。我甚至可以看到渲染回调返回的最终输出,这是正确的。然而,我在古腾堡街区看到了这个错误。如果有一条更重要的错误消息,而不是“不是有效的JSON响应”,这会很有帮助。

查看Chrome Inspector工具的网络选项卡,我发现上面发布的请求的实际响应是502 Bad Gateway - nginx.

我不知道这意味着什么,因为来自块的请求被发送到服务器回调,服务器回调正在处理请求并返回正确的响应。在回调返回的响应和块的客户端呈现之间的某个地方发生了一些事情。你知道可能发生了什么吗?

2 个回复
最合适的回答,由SO网友:JohnRDOrazio 整理而成

在发现本例中的确切问题后,由于ServerSideRender在GET请求中发送了太多属性,因此请求头太大,我opened a ticket 在Gutenberg开发库上,为这个问题提出了一些可能的解决方案。这个问题实际上已经解决了,因为我不是第一个遇到这个问题的人,所以现在pull request to solve this by allowing POST request to be made instead of GET requests.

至于在出现错误时从ServerSideRender获得更重要响应的最初问题,这仍然存在。如果能看到比Error loading block: The response is not a valid JSON response. 也许可以从响应中看到确切的http状态代码,而不必在浏览器检查器工具的网络请求中挖掘它。。。

SO网友:Tom J Nowell

问题是你的块有很多属性,当它们变成GET HTTP标头的url比Nginx安装程序配置要处理的url大。

这就是为什么会出现502网关错误,这不是WP错误,WP甚至无法加载。

有5种可能的解决方案:

需要更改nginx配置才能使用您的代码,以支持超长URL,减少传递给服务器的属性数量,方法可能是分解块,或依赖块编辑器功能,如块样式而不是专用属性,使用javascript重新实现,并使用API自己与PHP交互,允许您执行必要的PHP位,然后自己在JS中应用属性将此块分解为多个块,听起来它做了很多事情,可能会从可组合性中受益,但最后一个:

不要依赖服务器端渲染来显示保存的输出和编辑输出。它们不一定是一样的。您甚至不需要在块的编辑功能中使用服务器端渲染,您可以使其在编辑屏幕中渲染占位符,或实现完全不同的功能

相关推荐

阻止网络上的JSON访问

我的一个网站被一家安全公司扫描后,发现下面的内容需要屏蔽”http://domain.com/wp-includes/sodium_compat/composer.json“通过互联网访问。我尝试了几个插件,但都不起作用,有人知道如何阻止类似文件在浏览器上显示JSON吗。