Layui upload 的 headers 必须在 before 回调中动态赋值,因组件不走 jQuery AJAX、render 时固化配置,仅 before 能确保每次上传携带最新 token 或鉴权头;this.headers 是引用对象,可直接修改,且需同步更新 URL 对应的 headers,不可塞入 data 或依赖全局拦截。
headers 必须在 before 回调里动态赋值
layui upload 不走 jquery ajax,headers 在 render() 时写死就固化了,后续 token 更新或登录态变化完全无效。你以为配一次就能一劳永逸,实际每次上传都可能带着过期甚至空的 token 发请求。
真正起作用的只有 before 回调中对 this.headers 的赋值——它在每次 XHR 发出前执行,且直接作用于本次请求。
-
this.headers是引用对象,可直接新增或覆盖字段,比如this.headers.Authorization = 'Bearer ' + localStorage.getItem('token') - 如果 token 为空,建议
return false阻止上传,并弹提示,避免发一个 401 请求浪费资源 - 别在
choose或done里改this.headers,它们不参与请求头组装 - 不要手动设
Content-Type,浏览器会自动设为multipart/form-data;硬写application/json会导致后端解析失败
data 和 headers 的分工不能混
data 传业务参数(如 {type: 'avatar', bizId: '123'}),headers 只放认证类字段(Authorization、X-Tenant-ID 等)。两者生命周期不同:前者可在 render 时静态配置,也可在 before 中动态更新;后者必须靠 before 动态刷。
-
data支持对象或函数,函数内this指向 upload 实例,适合取当前上下文(如按钮上的data-params) - 千万别把 token 塞进
data传给后端——既违反 REST 规范,也增加服务端校验负担 - 后端收不到
data字段?检查是否误用@RequestBody解析 JSON,而data是以 form-data 普通字段形式提交的,应配合@RequestParam或$_POST读取
跨域场景下 headers 要和服务端 CORS 白名单对齐
加了自定义 header(比如 X-Auth-Token),后端的 Access-Control-Allow-Headers 就必须显式包含它,否则浏览器会在预检(OPTIONS)阶段直接拦截,连请求都发不出去。
- 常见错误现象:控制台报
Request header field x-auth-token is not allowed by Access-Control-Allow-Headers - Spring Boot 示例:需在
@CrossOrigin注解中加allowedHeaders = {"X-Auth-Token", "Authorization"} - PHP 示例:响应头需包含
header('Access-Control-Allow-Headers: X-Auth-Token, Authorization');
换 URL 时 headers 也要同步更新
如果用 before + obj.upload('/new/url') 动态切上传地址,this.headers 不会自动继承——你得在同个 before 里重新赋值,尤其是当不同接口对应不同鉴权策略时(比如 SaaS 多租户场景)。
- 不要依赖
render时的headers: { Authorization: '...' }配置,它只对初始 URL 生效 - 每次调
obj.upload()都要确保this.headers是最新状态,否则新地址可能因无权限被拒 - 若用
auto: false,后续所有手动触发都要重传headers,它不会缓存或复用
最常被忽略的一点:upload 和 table、form 根本不在同一套请求机制里,别指望 $.ajaxPrefilter 或 table.set() 对它生效。header 动态注入这件事,必须绑定到 before 生命周期里做,而且得每次上传都执行。


















