AJAX请求后页面空白，WordPress限制下快递面单生成问题求助

问题原因分析 #

• 缺少目标DOM元素：原代码中尝试将返回内容插入printResult元素，但HTML中未定义该元素，即使请求成功也无法显示内容，直接导致页面空白。
• WordPress CSRF防护拦截：新增的AJAX限制会验证nonce（随机数令牌），无有效令牌的请求会被拦截，甚至触发页面跳转。
• POST请求参数传递错误：将POST请求的参数放在URL查询字符串中，不符合POST请求的参数传递规范，部分服务器会拒绝此类请求或跳转。
• 未标识AJAX请求：WordPress默认会对非AJAX请求做特殊处理，缺少X-Requested-With请求头会导致请求被识别为普通页面请求，触发跳转。
• 跨域请求限制（若脚本在外部域名）：如果该HTML文件不在https://torebki-fabiola.pl域名下，浏览器的同源策略会阻止fetch请求，导致请求失败。

修复步骤与代码实现 #

1. 基础DOM结构修复 #

先在HTML中添加printResult元素，确保请求返回的内容能正常显示：

<!DOCTYPE html>
<html>
<head>
    <title>Formularz Drukowania Listu Przewozowego</title>
</head>
<body>
    <div id="printResult"></div> <!-- 添加目标元素 -->
    <script>
        // 脚本内容放在这里
    </script>
</body>
</html>

2. 适配WordPress AJAX限制的请求调整 #

如果脚本运行在WordPress站点内部（同域名），可以通过以下方式获取有效nonce并修正请求：

<!DOCTYPE html>
<html>
<head>
    <title>Formularz Drukowania Listu Przewozowego</title>
</head>
<body>
    <div id="printResult"></div>
    <script>
        window.onload = async function() {
            try {
                // 从页面meta标签获取WordPress CSRF令牌（需主题支持输出该meta）
                const nonce = document.querySelector('meta[name="csrf-token"]')?.content || '';
                const id = "130752";
                const apiKey = "[REDACTED]";

                const response = await fetch("https://torebki-fabiola.pl/", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                        "X-Requested-With": "XMLHttpRequest", // 标识为AJAX请求
                        "X-WP-Nonce": nonce // 添加CSRF令牌
                    },
                    body: new URLSearchParams({
                        flexible_shipping_get_label: id,
                        apikey: apiKey
                    })
                });

                if (!response.ok) {
                    throw new Error(`请求失败：${response.status} ${response.statusText}`);
                }

                const data = await response.text();
                document.getElementById("printResult").innerHTML = data;
                window.print();
            } catch (error) {
                console.error("Błąd podczas wysyłania żądania: ", error);
                document.getElementById("printResult").innerHTML = `Wystąpił błąd: ${error.message}`;
            }
        };
    </script>
</body>
</html>

3. 外部域名脚本的跨域处理（若适用） #

如果脚本在外部域名运行，需要在WordPress后台添加CORS支持：

• 在主题的functions.php中添加以下代码：

add_action('init', 'allow_cors_for_shipping_label');
function allow_cors_for_shipping_label() {
    header("Access-Control-Allow-Origin: *"); // 或指定你的域名，如https://your-domain.com
    header("Access-Control-Allow-Methods: POST");
    header("Access-Control-Allow-Headers: X-Requested-With, X-WP-Nonce, Content-Type");
}

同时确保Flexible Shipping插件的接口允许跨域请求，或者通过WordPress的admin-ajax.php作为中转端点。

额外注意事项 #

• Nonce获取方式：如果无法通过meta标签获取nonce，可在WordPress页面中通过wp_create_nonce('flexible_shipping')生成对应令牌（需根据插件的nonce动作名调整），并传递给前端脚本。
• 插件接口验证：确认Flexible Shipping插件的flexible_shipping_get_label接口是否支持POST请求，或是否需要改用GET（但需配合nonce验证）。
• 调试建议：打开浏览器开发者工具的「网络」面板，查看请求的状态码、响应内容，确认是请求被拦截、跨域错误还是参数错误。

内容的提问来源于stack exchange，提问作者Krystian Grzeszczak