Flutter Web端HTTP/Dio请求失败问题求助

• 排查CORS跨域限制
  Web端受浏览器同源策略约束，即使请求公开站点（如pub.dev），若目标服务器未配置允许你的Web域名（本地调试通常是http://localhost:端口号）跨域访问，就会触发该错误。

  • 若请求的是自有后端，需在服务端添加Access-Control-Allow-Origin等CORS响应头；
  • 可通过浏览器开发者工具的Network面板，查看请求是否返回CORS相关错误提示。

• 本地调试用代理绕过CORS
  本地开发时，可通过代理规避跨域限制：

  • 启动Flutter Web时指定代理参数：flutter run -d chrome --web-proxy-url="http://你的本地代理地址"
  • 或在web/index.html中临时引入调试用代理脚本（仅开发环境使用，生产环境禁用公共代理）：

    <script>
      window.$dartRunMain = function() {
        // 替换请求URL前缀为代理地址
        window.flutterProxyPrefix = 'https://调试用代理地址/';
      };
    </script>
    

• 检查浏览器与网络环境

  • 确认浏览器未开启离线模式，且未限制该Web应用的网络访问权限；
  • 排查网络环境：比如内网防火墙、代理服务器是否拦截了请求，移动端/桌面端可能因使用不同网络（如手机流量）未受限制。

• 适配Dio的Web配置
  显式配置Dio的Web适配器，确保跨平台兼容：

  import 'package:dio/dio.dart';
  import 'package:dio/browser.dart';
  import 'package:flutter/foundation.dart';
  
  void main() async {
    final dio = Dio();
    if (kIsWeb) {
      dio.httpClientAdapter = BrowserHttpClientAdapter();
    }
    final response = await dio.get('https://pub.dev');
    print(response.data);
  }
  

内容的提问来源于stack exchange，提问作者Sami Karaeen