跨域表单提交受限于同源策略，可通过后端代理、CORS配合AJAX、隐藏iframe等方式实现。1. 后端代理：表单提交至同源接口，由后端转发请求，无需目标服务器配置CORS，安全性高；2. CORS+AJAX：JavaScript拦截提交，用fetch发送跨域请求，需目标服务器设置Access-Control-Allow-Origin，并可携带凭证；3. JSONP仅支持GET，不适用于表单提交；4. 隐藏iframe可发送跨域请求但无法读取响应，适用于日志上报等场景。推荐优先使用后端代理或CORS方案。
HTML表单跨域提交在默认情况下会受到浏览器同源策略的限制，无法直接将数据提交到不同域名、端口或协议的服务器。但在实际开发中，存在一些合法且可行的解决方案来实现跨域表单提交。以下介绍几种常见且实用的方法。
1. 使用后端代理转发请求
这是最简单且推荐的方式。前端表单提交到同源的后端接口，由该后端服务作为代理，将请求转发到目标跨域服务器。
- 表单 action 指向当前域名下的接口，如 /api/submit-form
- 后端接收表单数据，使用 HTTP 客户端（如 Node.js 的 axios、Python 的 requests）转发请求
- 目标服务器无需开启 CORS，安全性高
- 适合无法控制目标服务器配置的场景
2. 利用 CORS 配合 AJAX 提交（非传统 form 提交）
虽然原生 HTML 表单不支持设置 CORS 请求头，但可以通过 JavaScript 拦截表单提交，改用 fetch 或 XMLHttpRequest 发送带 CORS 的请求。
- 监听表单的 submit 事件，阻止默认提交行为
- 收集表单数据，使用 fetch 发起跨域 POST 请求
- 要求目标服务器响应头包含 Access-Control-Allow-Origin
- 注意：Cookie 和认证信息需设置 credentials: 'include'
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault();
const data = new FormData(this);
fetch('https://api.example.com/submit', {
method: 'POST',
body: data,
mode: 'cors'
});
});
3. JSONP 不适用表单提交
JSONP 只能用于 GET 请求，不能提交表单数据（尤其是文件上传或 POST 数据），因此不适合真正的表单跨域提交场景。仅适用于简单参数传递和数据获取。
立即学习“前端免费学习笔记（深入）”；
4. 使用隐藏 iframe + 服务端配合（有限支持）
通过设置 form 的 target 指向一个隐藏的 iframe，可以实现“看似”跨域提交，但存在限制。
- 表单可提交到跨域地址，浏览器不会阻止发送请求
- 但无法通过 JavaScript 获取响应内容（受同源策略限制）
- 可用于日志上报、埋点等无需读取响应的场景
- 若目标服务器返回重定向页面，可跳转但无法通信
基本上就这些方法。最稳妥的是通过后端代理，既绕过浏览器限制，又保持表单的原始行为。如果允许使用 JavaScript，则结合 CORS 的 fetch 方案更灵活。iframe 方式只能用于特定用途，不能读取响应。选择哪种方式取决于你的具体需求和对目标服务器的控制权限。
