添加account-type请求头后触发Dio网络连接错误问题排查

问题重现 #

添加account-type自定义请求头后，Dio抛出以下错误：

DioExceptionType.connectionError
║ The connection errored: The XMLHttpRequest onError callback was called. This typically indicates an error on the network layer.

请求代码：

return await _dio.get(
  "payment/test/",
  options: Options(headers: {
    'account-type': 'master',
    'Authorization': authorize.user.access,
    'Accept': 'application/json',
  }),
);

解决方案 #

• 检查后端跨域配置
  自定义请求头会触发浏览器的OPTIONS预检请求，如果后端未在CORS配置中允许account-type，会直接导致连接失败。需要后端在响应头中添加允许的请求头列表：

  Access-Control-Allow-Headers: account-type, Authorization, Accept
  

  确保所有自定义及标准请求头都被包含在内。

• 验证请求头格式
  确认account-type的键名、值没有拼写错误，比如多余空格、大小写问题，同时检查值的格式是否符合后端接口要求。

• 排查Dio拦截器干扰
  若项目中使用了Dio拦截器，检查拦截器是否修改、移除了account-type头，或是添加了冲突配置。可临时禁用拦截器测试请求是否恢复正常。

• 测试基础请求
  先移除account-type头发送请求，若请求正常，说明问题确实出在该自定义头的处理上，再针对性排查后端配置或跨域规则。

内容的提问来源于stack exchange，提问作者morteza heydari