layui.form.submit跨域失败根源是浏览器CORS拦截，因$.ajax请求违反同源策略；需后端配置Access-Control-Allow-Origin等响应头，并前端通过$.ajaxSetup({xhrFields:{withCredentials:true}})启用凭据发送。
layui.form.submit 触发跨域失败的根源
不是 layui 的 bug，是浏览器拦截了 XMLHttpRequest 请求。当你用 layui.form.render() + lay-submit 提交表单，底层实际走的是 $.ajax（即 layui 封装的 jQuery ajax），一旦目标接口协议、域名或端口与当前页面不一致，浏览器立刻拒绝响应，并在控制台报错：CORS header 'Access-Control-Allow-Origin' is not present 或 Blocked by CORS policy。
常见触发场景：
- 本地双击打开
file://协议的 HTML 文件，直接请求https://api.example.com/login - 前端跑在
http://localhost:8080，后端 API 是https://api.example.com（协议不同） - 表单提交带
headers: { Authorization: 'Bearer xxx' }，但后端没在Access-Control-Allow-Headers中声明Authorization
后端必须配置的 CORS 响应头
前端改不了同源策略，只能让后端正确设置响应头。最简有效组合如下：
Access-Control-Allow-Origin: http://your-frontend-domain.com Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization Access-Control-Allow-Credentials: true
注意几个硬性约束：
-
Access-Control-Allow-Origin不能设为*同时又设Access-Control-Allow-Credentials: true，否则浏览器直接拒收——要传 cookie 或 token，就必须写死前端域名 - 如果前端用了
xhrFields: { withCredentials: true }（比如登录后携带 session），后端必须返回Access-Control-Allow-Credentials: true，且Origin不能是通配符 - Spring Boot 用户注意：
registry.addMapping("/**")比"/*"更可靠，否则带多级路径的接口（如/api/v1/user/login）可能被漏掉
前端如何让 layui 表单带 credentials 发请求
layui 的 form.on('submit()') 默认不启用凭据发送。你得在全局 ajax 配置里显式开启：
layui.use(['form', '$'], function(){
var form = layui.form,
$ = layui.$;
// 必须放在 form.render() 之前执行
$.ajaxSetup({
xhrFields: { withCredentials: true },
crossDomain: true
});
form.on('submit(formSubmit)', function(data){
$.post('/api/login', data.field, function(res){
// 处理响应
});
return false;
});
});
关键点：
-
$.ajaxSetup()要在form.render()之前调用，否则部分内部请求可能不生效 - 不要依赖
form.on('submit()')的默认提交逻辑去发请求——它不会自动继承xhrFields，必须手动用$.post或$.ajax发 - 若后端要求带 token，可改用
headers: { Authorization: 'Bearer ' + token }，此时后端Access-Control-Allow-Headers必须包含Authorization
开发阶段临时绕过（仅限调试）
生产环境绝对禁用，但本地验证逻辑是否通时可快速解耦前后端：
- Chrome 启动命令加参数：
--disable-web-security --user-data-dir=/tmp/laysafe（需完全关闭所有 Chrome 实例后再运行） - 用
http-server或live-server启一个http://localhost:8080服务，再配 Nginx 反向代理：location /api/ { proxy_pass https://real-api.com/; }，把接口“变”成同域 - 避免用
file://打开页面——这是 90% 本地跨域问题的源头，哪怕只是静态页也请起个 HTTP 服务
真正难的不是写几行代码，而是确认每层链路都对：前端域名、Nginx 代理路径、后端 CORS 配置、是否真带 credentials、预检 OPTIONS 是否被放行——漏掉任意一环，都会卡在同一个错误上。
