必须在 upload.render 的 xhrfields 中显式设置 withcredentials: true,且后端需配置 access-control-allow-credentials: true 和精确的 access-control-allow-origin 域名,cookie 还需带 domain=.example.com 和 path=/ 才能跨域生效。
必须显式设置 withcredentials: true,否则浏览器根本不会把 cookie 发过去,后端收不到也查不到原因。
upload.render 里必须配 xhrFields: { withCredentials: true }
Layui 的 upload.render 不继承全局 $.ajaxSetup 配置,所以即使你全局设了 withCredentials,上传组件依然不带 Cookie。必须在 upload 配置对象里单独声明:
-
xhrFields是唯一生效的位置,headers或beforeSend都不能触发凭证发送 - 不能只写
withCredentials: true,必须包在xhrFields: { ... }对象里 - 如果后端没开
Access-Control-Allow-Credentials: true,前端设了也没用,会直接被浏览器拦截
upload.render({
elem: '#upload',
url: 'https://api.example.com/upload',
xhrFields: { withCredentials: true }, // 关键!缺一不可
done: function(res){ console.log(res); }
});
后端响应头不能用 Access-Control-Allow-Origin: *
只要开了 withCredentials: true,后端的 Access-Control-Allow-Origin 就必须写成具体域名,比如 https://fe.example.com,不能是通配符 *,否则浏览器直接报错:
- 错误信息类似:
Response to preflight request doesn't pass access control check: 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' - .NET Core 要用
AllowCredentials()+WithOrigins("https://fe.example.com") - ASP.NET Framework 需手动检查
Origin请求头,动态回写匹配的域名
Cookie 本身得能跨域才有效
前端设对、后端配好,不代表一定能拿到 Cookie —— 浏览器只发它“认得”的 Cookie:
- 服务端 Set-Cookie 时必须带
Domain=.example.com(注意开头的点),否则只限子域名如api.example.com,而前端页面在fe.example.com就读不到 -
Path=/建议显式加上,避免路径限制导致 Cookie 不被携带 - 如果是 localhost 开发,两个服务都跑在
localhost:8080和localhost:3000,它们不算同域,需确保后端 Cookie 的Domain字段为空或未设置(部分浏览器对 localhost 的 Domain 处理特殊)
最容易卡住的地方:前端 upload 配了 xhrFields,后端 CORS 响应头也写了 Access-Control-Allow-Credentials: true,但 Access-Control-Allow-Origin 还是 * —— 浏览器静默失败,控制台只报 CORS 错误,不提示具体哪项不对。










