移动端 fetch 跨域请求为何报错 Credentials 不支持
移动端 fetch 跨域请求携带 Cookie 失败时,应检查请求是否设置了 credentials 标志,以及服务器响应头 Access-Control-Allow-Origin 是否为通配符。
检查客户端请求是否开启了凭证模式
移动端网页发起 fetch 跨域请求时,如果需要携带 Cookie 或 HTTP 认证信息,必须在请求中设置凭证标志。在 Fetch API 中,应将 Request.credentials 属性设置为 'include'。如果未设置此标志,浏览器默认不发送凭证,服务器响应头 Access-Control-Allow-Origin 的具体值将不起作用,导致请求被视为普通跨域请求。
排查时首先确认客户端代码中是否显式开启了凭证模式。若使用 XMLHttpRequest,需检查是否设置了 withCredentials 属性为 true。若使用 Server-sent events,需确认 EventSource.withCredentials 是否为 false(默认值)。客户端未开启凭证模式是导致请求失败或数据不完整的常见原因。
检查服务器响应头 Access-Control-Allow-Origin 的配置
服务器必须正确配置 Access-Control-Allow-Origin 响应头以允许跨域请求。当客户端请求中设置了凭证标志时,服务器不能使用通配符 '*' 作为该响应头的值。这是因为通配符 '*' 表示允许任何来源访问,但无法指定具体的凭证处理策略,浏览器会因此拦截响应。
服务器应将 Access-Control-Allow-Origin 的值设置为具体的请求来源地址,例如 'https://example.com'。同时,服务器还应返回 Access-Control-Allow-Credentials: true 响应头,明确告知浏览器允许在跨域请求中使用凭证。只有当客户端请求和服务器响应的凭证配置一致时,跨域请求才能成功携带凭证。
修改客户端代码以适配服务器配置
如果服务器配置了具体的 Access-Control-Allow-Origin 值,客户端代码必须相应调整。在 Fetch API 中,确保 Request.credentials 设置为 'include',以匹配服务器允许凭证的策略。如果服务器未配置允许凭证,客户端应将 Request.credentials 设置为 'omit',以避免请求失败。
对于使用 XMLHttpRequest 的场景,确保不设置 withCredentials 为 true,或者仅在服务器明确允许时才设置。对于 Server-sent events,保持 EventSource.withCredentials 为 false。客户端代码的修改必须与服务器响应头的配置保持一致,才能确保跨域请求正常工作。
验证请求与响应的凭证配置是否匹配
完成修改后,可以通过浏览器开发者工具的 Network 面板验证请求与响应的配置是否匹配。在请求的 Headers 中查看是否有凭证相关的设置,并在响应的 Headers 中检查 Access-Control-Allow-Origin 是否为具体值而非 '*',以及是否存在 Access-Control-Allow-Credentials: true。
如果响应头 Access-Control-Allow-Origin 仍为 '*',说明服务器配置未更新,需联系服务器管理员修改配置。如果客户端代码未设置凭证标志,需在代码中添加相应的配置。只有当客户端请求和服务器响应的凭证配置完全匹配时,跨域请求才能成功携带凭证并完成数据交互。
资料与延伸阅读
你可以通过以下原始资料核对文中概念,并继续深入阅读。