移动体验 / 方法解读

移动端 fetch 请求跨域携带 Cookie 失败如何排查

移动端 fetch 请求跨域携带 Cookie 失败时,应重点检查服务端响应头 Access-Control-Allow-Credentials 的值是否为 true。

展示HTTP和HTTPS网络请求的示意图
主题资料配图,非新闻现场照片 · 配图:http,https网络请求

检查 credentials 设置与响应头配置

移动端 fetch 请求跨域携带 Cookie 失败时,应重点检查服务端响应头 Access-Control-Allow-Credentials 的值是否为 true。如果该响应头的值不是 true,浏览器会阻止凭证的使用,导致请求失败。这是因为跨域请求默认情况下不允许携带 Cookie 等敏感信息,必须由服务端明确允许。

在客户端代码中,如果使用 Fetch API 发起请求,需要确保 Request.credentials 的值设置为 omit,以避免请求凭证。如果使用 XMLHttpRequest,则不应设置 withCredentials 为 true。对于 Server-sent events,默认情况下 EventSource.withCredentials 为 false,无需额外设置。只有当服务端配置正确时,客户端的凭证请求才能成功。

排查服务端配置与客户端代码冲突

排查时需确认服务端配置是否正确设置了 Access-Control-Allow-Credentials 响应头。如果服务端未配置该响应头或值不为 true,无论客户端如何设置,请求都会因凭证策略而失败。服务端必须明确允许跨域请求携带凭证,这是浏览器安全机制的要求。

同时,客户端代码中不应主动开启凭证请求。在 Fetch API 中,Request.credentials 应设置为 omit;在 XMLHttpRequest 中,不应设置 withCredentials 为 true。如果客户端代码中错误地开启了凭证请求,而服务端未允许,也会导致请求失败。检查客户端代码与服务器配置的一致性是解决问题的关键。

验证修复后的请求结果

修复服务端配置后,可以通过浏览器开发者工具的 Network 面板查看响应头。确认 Access-Control-Allow-Credentials 的值已变为 true,且请求状态码为 200。此时,再次发起请求,检查是否成功携带了 Cookie。如果请求成功且响应头正确,说明问题已解决。

如果修复后请求仍然失败,需进一步检查客户端代码。确保 Fetch API 的 Request.credentials 设置为 omit,或者 XMLHttpRequest 未设置 withCredentials 为 true。通过对比服务端配置和客户端代码,可以定位并解决跨域请求携带 Cookie 失败的问题。

区分客户端与服务器端的修复方案

解决跨域请求携带 Cookie 失败的问题,需要根据错误原因选择修复方案。如果错误提示服务端未允许凭证,应修改服务端配置,将 Access-Control-Allow-Credentials 响应头的值设置为 true。这是服务端必须提供的响应头,用于明确允许跨域请求携带凭证。

如果错误提示客户端错误地请求了凭证,应修改客户端代码。在 Fetch API 中,确保 Request.credentials 为 omit;在 XMLHttpRequest 中,确保不设置 withCredentials 为 true。通过区分客户端和服务器端的修复方案,可以更有效地解决跨域请求携带 Cookie 失败的问题。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. Reason: expected 'true' in CORS header 'Access-Control-Allow-Credentials' - HTTP | MDN ↗
  2. 配图:http,https网络请求 ↗
← 更多移动体验文章返回顶部 ↑