如何实现带页面跳转的跨域POST请求及解决表单未提交问题

我正在开发一个提供单词列表的语言学习网站，同时在子域名下设有闪卡站点。希望用户选择单词后，点击按钮向闪卡站点发起POST请求，携带选中的单词列表并生成闪卡页面。

此前通过GET请求实现该功能，将单词数据存储在URL中，但存在明显弊端。现尝试改用POST请求，代码如下：

const createCustomDeck = ()=>{
    let items = document.querySelectorAll(".selected");

    let cards = [];
    for(let i = 0; i < items.length; i++){
        cards.push([items[i].children[0].textContent, items[i].children[1].textContent]);
    }

    let form = document.createElement("form");
    form.method = "post";
    form.action = "http://localhost:8001/deck/custom";
    let hidden = document.createElement("input");
    hidden.type = "hidden";
    hidden.name = "cards";
    hidden.value = JSON.stringify(cards);
    form.appendChild(hidden);
    form.submit();
}

经测试函数已执行，但表单未提交，网络面板无请求记录。闪卡站点已配置CORS允许任意域名访问。请问如何让请求正常发送并跳转到跨站服务器的新页面？

问题核心是动态创建的表单未挂载到DOM树中，主流浏览器不会处理未插入DOM的表单提交操作。修改后的代码如下：

const createCustomDeck = ()=>{
    let items = document.querySelectorAll(".selected");

    let cards = [];
    for(let i = 0; i < items.length; i++){
        cards.push([items[i].children[0].textContent, items[i].children[1].textContent]);
    }

    let form = document.createElement("form");
    form.method = "post";
    form.action = "http://localhost:8001/deck/custom";
    // 可选：设置target="_blank"在新标签页打开，不设置则在当前页面跳转
    form.target = "_self"; 
    
    let hidden = document.createElement("input");
    hidden.type = "hidden";
    hidden.name = "cards";
    hidden.value = JSON.stringify(cards);
    form.appendChild(hidden);
    
    // 将表单挂载到DOM中，这是提交成功的关键
    document.body.appendChild(form);
    form.submit();
    // 提交后移除表单，避免DOM冗余
    document.body.removeChild(form);
}

关键说明 #

• 必须把动态创建的<form>元素添加到DOM（比如document.body），浏览器才能触发提交流程。
• 表单提交属于浏览器原生跨站导航，无需依赖AJAX的CORS配置，只要目标站点正常接收POST参数即可。
• 若需要在新标签页打开闪卡页面，将form.target设为_blank即可。

内容的提问来源于stack exchange，提问作者Lee Morgan