外贸建站Woocommerce 结账页面一直加载不动

用户的网站突然出现莫名其妙的故障。

主要问题

Woocommerce 结账页面一直加载不动，无法继续结账了。

通常结账页面的’review order’ 通过 ajax 加载付款方式/总计 – 这会简要显示加载器。如果有问题，这里就会无法加载成功，也就如上的图片那样一直卡着。

排查过程

首先，检查WooCommerce > 系统状态，是否有错误——通常会突出显示错误。

如果没问题，我们继续检查

WordPress 设置导致的 AJAX 错误

设置 > 常规，中的 URL需要匹配——这是因为 AJAX 请求不能跨不同的域工作。

其他 JavaScript 错误和冲突

这里一般是主题和插件，任意切换一个系统主题，查看是否正常

排查插件是否冲突，逐个禁用插件来排除。

如果还是不正常，那么继续

 AJAX 调用的无效响应

打开浏览器（谷歌浏览器）的开发者控制台上网络- Fetch/XHR 选项卡并查看?wc-ajax=update_order_review 响应。正常的响应将是 JSON。如果响应是 HTML，这通常是由 WordPress 安装根目录中的 index.html 文件引起的

这可以通过删除 index.html 文件或通过调整服务器配置上的索引将 index.php 优先于 index.html 来解决。

如下，响应为HTML是不正常的

正常应该响应如下为JSON

一些缓存插件也会在 JSON 响应之前添加 HTML。

最后排查到客户有在使用cloudflare, 通过禁用CDN后，正常了，所以我们要检查CDN的加速规则。

经过调整后，一切恢复正常了。