前端HTML/JS直接后台发送WhatsApp消息的局限性与解决方案探讨

<form>
    <input type="text" id="mssgbox" placeholder="输入消息" />
    <button type="button" onclick="sendMessage()"> 发送 </button>
</form>

<script>
function sendMessage() {
    let typedText = document.querySelector('#mssgbox').value;
    // 注意：这里的 URL 构造应确保参数正确，例如使用 &text= 而非 ?text=
    // 但无论如何，window.location.href 都会导致重定向
    window.location.href = 'https://api.whatsapp.com/send?phone=2347034907106&text=' + encodeURIComponent(typedText);
}
</script>

async function sendBackgroundMessage() {
    let typedText = document.querySelector('#mssgbox').value;
    try {
        const response = await fetch('/api/send-whatsapp', { // 你的后端API端点
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                phoneNumber: '2347034907106', // 接收方电话
                message: typedText
            })
        });
        const data = await response.json();
        if (response.ok) {
            alert('消息已成功发送！');
        } else {
            alert('消息发送失败: ' + data.error);
        }
    } catch (error) {
        console.error('发送请求时发生错误:', error);
        alert('发送请求时发生网络错误。');
    }
}

// 这是一个概念性的后端路由示例，实际集成会更复杂
const express = require('express');
const axios = require('axios'); // 用于发送HTTP请求
const app = express();
app.use(express.json());

const WHATSAPP_BUSINESS_API_URL = 'https://graph.facebook.com/v18.0/<YOUR_PHONE_NUMBER_ID>/messages';
const ACCESS_TOKEN = 'YOUR_WHATSAPP_BUSINESS_API_ACCESS_TOKEN'; // 你的API访问令牌

app.post('/api/send-whatsapp', async (req, res) => {
    const { phoneNumber, message } = req.body;

    try {
        const response = await axios.post(WHATSAPP_BUSINESS_API_URL, {
            messaging_product: 'whatsapp',
            to: phoneNumber,
            type: 'text',
            text: {
                body: message
            }
        }, {
            headers: {
                'Authorization': `Bearer ${ACCESS_TOKEN}`,
                'Content-Type': 'application/json'
            }
        });
        res.status(200).json({ success: true, apiResponse: response.data });
    } catch (error) {
        console.error('调用WhatsApp Business API失败:', error.response ? error.response.data : error.message);
        res.status(500).json({ success: false, error: '无法发送WhatsApp消息。' });
    }
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});