测试环境下fetch既不触发.then也不触发.catch问题排查求助

问题原因 #

常见触发原因： #

• 请求一直处于pending状态未完成：测试环境的后端服务故障、网络链路不通、WAF/防火墙规则拦截了请求，导致服务端始终没有返回响应，fetch会一直等待不会触发回调。
• 请求被浏览器安全策略拦截：
  • 内容安全策略(CSP)配置限制：测试环境的CSP规则未放行eduConnect服务的域名，浏览器直接拦截请求，不会触发fetch的回调
  • 混合内容拦截：如果测试站点是HTTPS协议，但请求的eduConnect接口是HTTP协议，浏览器会自动拦截这类混合内容请求
• 跨域配置异常：你配置了mode: 'cors'和credentials: 'include'，要求服务端返回的跨域头必须满足Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能为通配符*，必须和请求源完全匹配，否则浏览器会拦截响应，不会进入回调
• 请求被主动取消：如果组件在fetch响应返回前就卸载，或者有其他逻辑通过AbortController主动取消了请求，也会出现回调不触发的情况

排查思路 #

• 第一步：确认fetch请求的执行路径，在fetch()调用前添加日志，确认代码确实执行到了fetch逻辑，排除eduConnectClient.getLoginUrl()调用抛出未被捕获的异常的情况
• 第二步：查看网络面板对应请求的状态：
  • 如果状态为pending：排查测试环境到eduConnect服务的网络连通性、服务端是否正常响应、是否有中间网关拦截请求
  • 如果状态为canceled：排查组件是否提前卸载、是否有其他逻辑主动取消了请求
• 第三步：查看控制台所有报错日志，重点查找CSP违规、混合内容、跨域相关的报错，可直接定位到安全策略拦截类问题
• 第四步：校验跨域配置，查看OPTIONS预检请求的响应头是否符合cors+include模式的要求，不符合的话需要调整服务端跨域配置

内容的提问来源于stack exchange，提问作者Dimitri Kopriwa