必须显式配置 xhrFields: { withCredentials: true },因 Layui upload 不继承 $.ajaxSetup;仅跨域生效,且需后端配合 Access-Control-Allow-Credentials: true 与精确 Access-Control-Allow-Origin,并确保 Cookie 的 Domain、Path、Secure、SameSite 属性正确。

upload.render 必须显式配置 xhrFields: { withCredentials: true }
Layui 的 upload 组件不继承全局 $.ajaxSetup,哪怕你调用过 $.ajaxSetup({ xhrFields: { withCredentials: true } }),上传请求依然不会带 Cookie。唯一生效的位置是 upload.render 配置对象里的 xhrFields 字段。
常见错误是只写 withCredentials: true,但漏掉外层对象包装——必须写成:
xhrFields: { withCredentials: true }
否则浏览器根本不会触发凭证发送逻辑,后端收不到 Cookie,也查不到原因。
- 这个设置仅对跨域上传生效;同域下 Cookie 默认携带,无需额外配置
- 如果接口域名和当前页面域名不同(比如前端在
admin.example.com,上传接口在upload.example.com),就必须配这项 - 不配或配错,控制台通常看不到明显报错,但 Network 面板里请求的 Request Headers 里没有
Cookie字段
后端必须同时满足两个 CORS 条件
前端设了 withCredentials: true 只是前提,后端没配合,请求会在预检(OPTIONS)阶段被浏览器直接拦截,连实际上传请求都发不出去。
后端响应头必须包含:
Access-Control-Allow-Credentials: true-
Access-Control-Allow-Origin必须是精确域名,例如https://admin.example.com,不能是*
这两个缺一不可。尤其注意第二点:一旦开了 withCredentials,Access-Control-Allow-Origin: * 会被浏览器拒绝,报错类似 The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'。
Cookie 本身要满足跨域可发送条件
即使前后端配置都对了,如果 Cookie 是用 document.cookie 手动写的、或服务端 Set-Cookie 时没指定 Domain 和 Path,它也可能无法跨域发送。
服务端下发 Cookie 时,至少应包含:
-
Domain=.example.com(注意开头的点,表示子域名共享) Path=/-
Secure(如果走 HTTPS) -
SameSite=None(Chrome 80+ 要求跨站请求必须显式声明)
前端无法主动“选择”某个 Cookie 发送,浏览器只按同源策略和 Cookie 属性自动决定是否附带——所以关键在服务端下发时就写对。
headers 里别误加 Authorization 替代 Cookie
有人想绕开 Cookie,改用 Authorization 请求头传 token,这在 upload 组件里可行,但要注意:headers 是静态配置,不能自动刷新;而 this.headers 在 before 钩子里可动态赋值,更适合存 token。
但如果你本意是复用登录态 Cookie(比如 Session ID),就不要在 headers 里硬塞 Authorization——这会导致后端鉴权逻辑混乱,且掩盖了 Cookie 未生效的真实问题。
真正需要 Cookie 的场景(如基于 Session 的权限校验),必须走 xhrFields.withCredentials + 后端 CORS + 正确 Cookie 属性这一整套链路,少一个环节都会静默失败。


















