如何在React项目中实现WordPress WP-Polls插件的投票POST请求？

问题场景 #

我有个部署了 WP-Polls 插件的 WordPress 站点，想在 React 项目里通过 POST 请求完成投票（比如选择值为2的「Bad」选项）。站点输出的投票表单 HTML 如下：

<form id="polls_form_1" class="wp-polls-form" action="/index.php" method="post">
    <ul>
        <li>
            <input type="radio" id="poll-answer-1" name="poll_1" value="1">
            <label>Good</label>
        </li>
        <li>
            <input type="radio" id="poll-answer-2" name="poll_1" value="2">
            <label>Bad</label>
        </li>
    </ul>
    <input type="button" name="vote" value="Vote" class="Buttons" onclick="poll_vote(1);">
</form>

我自己写的 fetch 请求没生效，原代码如下：

fetch('https://xxxx.com/index.php', {
    method: 'POST',
    body: {"poll_1" : "2"},
})

推测是没处理 poll_vote(1) 里的逻辑，导致参数不全。

问题原因 #

WP-Polls 的投票接口不止需要选中选项的 poll_1 参数，还需要额外的必填参数：

1. poll_id：对应 poll_vote(1) 里的「1」，也就是当前投票的ID
2. action：固定为 poll_vote，告诉 WordPress 执行投票动作
3. _wpnonce：WordPress 的安全验证字段，防止恶意请求
4. 请求编码必须是 application/x-www-form-urlencoded（原表单默认格式），不能直接传 JSON

正确的 Fetch 实现 #

步骤1：获取安全验证字段 _wpnonce

从 WordPress 站点的投票页面 HTML 里找隐藏字段，通常是：

<input type="hidden" name="_wpnonce" value="xxxxxx">

或者查看页面全局变量（WP-Polls 可能会暴露 wpPollNonce 之类的变量），把这个值存下来。

步骤2：构造完整的 POST 请求

// 替换成你实际获取到的nonce值
const pollNonce = 'xxxxxx';

fetch('https://xxxx.com/index.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    // 用 URLSearchParams 处理表单编码
    body: new URLSearchParams({
        poll_1: '2',          // 选中的选项值
        poll_id: '1',         // 投票ID，对应poll_vote(1)里的1
        action: 'poll_vote',  // WP-Polls 处理投票的动作标识
        _wpnonce: pollNonce,  // 安全验证字段
    }),
    credentials: 'include', // 带上cookie，防止重复投票（WP-Polls会限制重复投票）
})
.then(response => response.text())
.then(data => {
    console.log('投票成功，返回结果:', data);
    // 这里可以解析返回的HTML，更新React页面的投票结果展示
})
.catch(error => {
    console.error('投票失败:', error);
});

关键注意事项 #

• 请求编码：必须用 application/x-www-form-urlencoded，不能传 JSON，否则 WordPress 后端无法识别参数
• 安全验证：_wpnonce 必须正确，否则请求会被 WordPress 的安全机制拒绝
• 会话保持：加上 credentials: 'include'，确保请求带上用户的cookie，WP-Polls 会通过cookie或IP限制同一用户重复投票

内容的提问来源于stack exchange，提问作者Gurkan T