Layui上传组件如何携带额外的Header参数-Layui教程-PHP中文网

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）阶段直接拦截，连请求都发不出去。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

常见错误现象：控制台报 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');