JavaScript 通过传统表单（<form> 标签）提交数据时，默认不会触发浏览器的跨域限制（CORS 策略）。这是因为表单提交的行为与 AJAX 请求有本质区别。
1. 传统表单提交的机制
当通过 <form> 标签提交数据（无论是直接点击提交按钮，还是通过 JavaScript 调用 form.submit()），浏览器会直接发起一个 HTTP 请求，并根据响应结果进行页面跳转。这种行为属于浏览器的默认导航行为，而非通过 JavaScript 代码直接获取响应内容，因此不受跨域策略的限制。
示例代码：
<form action="https://other-domain.com/submit" method="POST">
<input type="text" name="username" />
<button type="submit">提交</button>
</form>
- 结果：即使
action指向不同域的地址，浏览器也会正常提交表单并跳转到目标页面，不会触发跨域错误。
2. 为什么没有跨域问题？
- 页面导航是允许的：跨域限制（CORS）主要针对通过 JavaScript 异步获取数据（如 AJAX 请求或 Fetch API），目的是防止恶意脚本窃取跨域数据。而表单提交会导致页面跳转，属于用户主动触发的导航行为，浏览器认为这是安全的。
- 历史兼容性：表单提交是 Web 早期就存在的功能，设计时未考虑现代的安全策略，因此默认允许跨域提交。
3. 异步表单提交（AJAX）的跨域问题
如果使用 JavaScript 异步提交表单数据（如通过 fetch 或 XMLHttpRequest），则会触发跨域限制。此时，服务器必须配置 CORS 响应头（如 Access-Control-Allow-Origin），否则浏览器会阻止请求。
示例代码（会触发跨域错误）：
// 使用 Fetch API 提交数据到不同域
fetch("https://other-domain.com/submit", {
method: "POST",
body: new FormData(document.querySelector("form")),
})
.then(response => response.json())
.catch(error => console.error("跨域请求被阻止！"));
- 结果：如果目标服务器未配置 CORS 响应头，浏览器会抛出跨域错误。
4. 隐藏的风险：CSRF 攻击
虽然传统表单提交允许跨域，但这会带来 CSRF（跨站请求伪造） 的安全风险。攻击者可以诱导用户点击一个伪造的表单，向目标服务器发送恶意请求（如转账、修改密码等）。
防御措施：
- CSRF Token：服务器为每个表单生成唯一的 Token，提交时验证 Token。
- SameSite Cookie：设置 Cookie 的
SameSite属性为Strict或Lax。 - 验证 Referer/Origin：服务器检查请求头中的来源是否合法。
总结
| 提交方式 | 是否触发跨域限制 | 典型场景 |
|---|---|---|
| 传统表单提交 | 否 | 页面跳转、表单直接提交 |
| AJAX/Fetch 提交 | 是 | 异步获取数据、单页应用（SPA） |
- 传统表单提交无跨域问题，但需防范 CSRF。
- AJAX 提交需配置 CORS，且需要服务器支持。
