移动端 XMLHttpRequest 跨域请求为何报错 Credentials 不支持
当使用 XMLHttpRequest 发起跨域请求时,如果服务端未设置 Access-Control-Allow-Credentials 响应头为 true,浏览器会拦截请求并报错。
检查服务端响应头是否允许凭证
移动端 XMLHttpRequest 跨域请求报错 Credentials 不支持,根本原因在于服务端未正确配置跨域资源共享策略。当客户端发起跨域请求并希望携带凭证时,服务端必须在响应头中明确声明允许。如果响应头 Access-Control-Allow-Credentials 的值不是字符串 true,浏览器会直接拦截该请求并阻止凭证的发送。这是浏览器安全机制的一部分,用于防止跨站请求伪造攻击。
排查时需要确认服务端返回的 HTTP 响应头中是否包含 Access-Control-Allow-Credentials: true。如果服务端配置错误,例如该头不存在或值为 false,浏览器将无法识别这是允许携带凭证的请求。这种情况下,即使客户端代码正确设置了请求选项,请求也会因为服务端配置不合规而失败。确保服务端配置与客户端请求意图一致是解决问题的关键第一步。
确认客户端请求是否启用了凭证模式
除了服务端配置,客户端发起请求时的设置也直接影响 Cookie 是否能被携带。在使用 XMLHttpRequest 时,必须确保没有将 withCredentials 属性设置为 true,因为该属性仅对同源请求有效。如果该属性被设置为 true,浏览器会尝试在跨域请求中发送 Cookie,但若服务端未允许,请求就会失败。
在排查过程中,应检查发起 XMLHttpRequest 请求的代码片段。如果使用的是 Fetch API,则需要确保 Request.credentials 是 'omit'。对于 Server-sent events,默认情况下 withCredentials 为 false,这是符合预期的。客户端代码的设置必须与服务端允许凭证的配置相匹配,否则请求将无法携带 Cookie。
验证请求是否为跨域请求
跨域请求携带凭证有着严格的限制,必须同时满足同源策略和 CORS 规则。如果请求是同源的,浏览器通常会自动携带 Cookie,无需额外配置。因此,首先需要确认发起请求的 URL 是否与当前页面属于不同的源。如果请求是同源的,那么问题可能不在于 CORS 配置,而在于其他原因,如 Cookie 的域属性或路径设置。
对于跨域请求,浏览器会自动发送预检请求(preflight request)。如果预检请求失败,后续的正式请求也不会携带 Cookie。因此,在排查时还应检查预检请求的响应头是否也包含了 Access-Control-Allow-Credentials: true。只有预检和正式请求都通过了凭证验证,浏览器才会允许在正式请求中发送 Cookie。
检查浏览器控制台报错信息
浏览器开发者工具的控制台通常会提供具体的错误信息,帮助定位问题。当 XMLHttpRequest 跨域请求携带 Cookie 失败时,控制台可能会显示 Reason: expected 'true' in CORS header 'Access-Control-Allow-Credentials' 的错误提示。这个错误直接指出了服务端响应头配置不正确的问题。通过查看控制台,可以快速确认是否是因为服务端未设置正确的响应头导致的。
除了控制台报错,还可以通过 Network 面板查看请求的详细信息。在 Network 面板中,选中失败的请求,查看 Response Headers 部分,确认 Access-Control-Allow-Credentials 头是否存在以及其值是否为 true。如果该头缺失或值不正确,说明服务端配置存在问题。根据控制台的提示和 Network 面板的信息,可以准确地定位并修复配置错误。
资料与延伸阅读
你可以通过以下原始资料核对文中概念,并继续深入阅读。