如何在不跳转到其他域名的情况下提交HTML表单？

嘿，我完全懂你遇到的这个困扰——跨域提交表单又不想跳转到目标域名，确实踩过不少坑。先给你一个肯定的答案：存在纯HTML的可行方案，完全不需要JS，也不会触发CORS限制，你之前尝试的iframe方法方向是对的，可能只是细节没处理到位。

核心解决方案：用隐藏iframe作为表单的target #

表单提交本身不受同源策略限制（只有JS发起的AJAX/fetch请求才会触发CORS），所以我们可以把表单的提交目标指向一个隐藏的iframe，这样提交动作会在后台iframe里完成，当前页面完全不会跳转。

具体代码实现如下：

<!-- 首先创建一个隐藏的iframe -->
<iframe name="hiddenFormTarget" style="display: none;"></iframe>

<!-- 你的表单，把target设为iframe的name -->
<form method="post" action="https://someotherdomain.com" target="hiddenFormTarget">
  <!-- 你的所有输入字段 -->
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <input type="submit" value="提交">
</form>

为什么这个方案可行？ #

• 这是纯HTML实现，没有用到任何JS，所以完全不会触发CORS或同源策略限制——同源策略只约束JS对跨域资源的访问，而浏览器原生的表单提交行为不受此限制。
• 表单的提交结果会加载在隐藏的iframe中，当前页面的URL和内容都不会发生变化，完美符合你的需求。

你之前可能的误区 #

你提到尝试过把target设为_blank或隐藏iframe，可能是iframe的name属性和表单的target没有对应上，或者iframe的样式没设置好导致显示出来了。上面的代码里，iframe的name必须和表单的target值完全一致，这样才能正确指向。

额外注意事项 #

如果需要在提交后给用户一个反馈（比如“提交成功”提示），因为跨域的原因JS无法访问iframe里的内容，但你可以监听iframe的load事件，在表单提交后触发提示：

// 注意：这个JS只是用来做反馈，不是用来提交表单的，所以不会触发CORS
document.querySelector('iframe[name="hiddenFormTarget"]').addEventListener('load', function() {
  alert('表单提交完成！');
});

不过这个提示只能确认表单已经提交，无法拿到目标域名返回的具体结果（因为跨域限制），如果需要获取返回结果，那必须目标域名配合启用CORS或者设置JSONP，但你说无法启用跨域请求，所以这个反馈只能做基础提示。

总结一下，这个隐藏iframe的方案完全满足你的需求：跨域提交表单、不跳转当前页面、不需要JS提交（也可以不用JS，纯HTML）、不触发CORS限制。

内容的提问来源于stack exchange，提问作者Marko Maric