Flutter http包抛出XMLHttpRequest Error的非CORS成因排查咨询

核心结论 #

XMLHttpRequest Error 并不一定由CORS策略缺失导致，所有导致XHR请求未正常完成的客户端/网络/服务端问题都可能抛出该异常，你拿到的ClientException类型仅能说明请求在客户端侧被终止，无法直接定位根因。

仅用异常消息+URI判断CORS问题的方法 #

如果只有这两类信息，可以通过以下规则先排查CORS诱因：

• 先判断请求是否跨域：对比请求URI的协议、域名、端口和发起请求的页面源，三者完全一致为同域请求，直接排除CORS问题
• 校验跨域规则匹配度：如果是跨域请求，核对服务端CORS白名单是否覆盖当前请求的源、请求方法、自定义请求头，部分场景下仅配置了生产环境域名白名单，测试/灰度/用户自定义域名不在白名单内就会偶发报错
• 排查预检请求异常：如果是带自定义头/非GET/POST的非简单请求，需要先发起OPTIONS预检请求，就算正式请求的CORS头配置正确，OPTIONS请求返回4xx/5xx状态码也会被判定为CORS失败，抛出该异常

非CORS类偶发报错的排查方向 #

确认服务端CORS配置正确的前提下，优先排查以下常见诱因：

• 客户端网络波动：用户侧弱网、网络切换（WiFi切蜂窝网络）、请求过程中断网重连都会导致XHR请求被强制中断，这类错误无固定规律，错误率和用户侧网络环境质量直接相关
• 请求超时触发终止：前端XHR配置的超时阈值过短，服务端响应耗时超过阈值会被客户端主动终止，可在日志中补充请求发起和报错的时间差统计验证
• 页面生命周期主动终止：页面刷新、跳转、组件卸载时未主动取消未完成的XHR请求，浏览器会主动终止这些请求抛出异常，这类报错通常集中在用户触发跳转/关闭操作的时间点
• 客户端拦截策略：用户开启了浏览器跨站跟踪拦截、广告屏蔽插件、公司内网代理拦截规则，会主动拦截部分第三方域名的请求，就算CORS配置正确也无法正常发起
• 服务端断连异常：服务端处理请求过程中主动断开连接、网关超时、负载均衡转发失败，未返回任何响应头时也会触发XHR错误
• 安全策略拦截：请求URI的HTTPS证书过期/不被信任、HTTPS页面发起HTTP请求触发混合内容拦截，都会导致请求被浏览器强制终止

内容的提问来源于stack exchange，提问作者manish kiranagi