Flutter Web端使用WebView加载谷歌页面出现connection refused问题求助
问题
仅用Flutter构建Web端应用时,加载https://flutter.dev一切正常,但切换到https://www.google.com时出现connection refused错误,尝试了flutter_inappwebview和webview_flutter_web两个库,问题一致。相关代码如下:
InAppWebView( key: webViewKey, initialUrlRequest: URLRequest( url: WebUri("https://www.google.com"), ), onReceivedServerTrustAuthRequest: (controller, challenge) async { return ServerTrustAuthResponse( action: ServerTrustAuthResponseAction.PROCEED, ); }, onLoadStop: (controller, url) async { webViewController = controller; setState(() { progress = 1; this.url = url.toString(); }); }, initialOptions: InAppWebViewGroupOptions( crossPlatform: InAppWebViewOptions( useShouldOverrideUrlLoading: true, mediaPlaybackRequiresUserGesture: false, )), onWebViewCreated: (controller) { webViewController = controller; }, onLoadStart: (controller, url) { setState(() { this.url = url.toString(); }); }, androidOnPermissionRequest: (controller, origin, resources) async { return PermissionRequestResponse(resources: resources, action: PermissionRequestResponseAction.GRANT); }, onLoadError: (controller, url, code, message) {}, onProgressChanged: (controller, progress) { if (progress == 100) {} setState(() { this.progress = progress / 100; }); }, onUpdateVisitedHistory: (controller, url, androidIsReload) { setState(() { this.url = url.toString(); }); }, onConsoleMessage: (controller, consoleMessage) {}, shouldOverrideUrlLoading: (controller, navigationAction) async { var uri = navigationAction.request.url!; if (!["http", "https", "file", "chrome", "data", "javascript", "about"].contains(uri.scheme)) { if (await canLaunchUrl(uri)) { await launchUrl(uri); return NavigationActionPolicy.CANCEL; } } return NavigationActionPolicy.ALLOW; }, ),
解决方法
- 排查CORS限制:Flutter Web受浏览器同源策略约束,Google的服务会限制未授权域名的嵌入请求。本地开发时可尝试配置CORS代理,或者调整WebView的跨域允许设置(注意生产环境需评估安全风险)。
- 验证网络连通性:先直接在浏览器打开
https://www.google.com,确认本地网络能正常访问该服务,部分地区可能需要特殊网络配置。 - 调整WebView配置项:
- 对于
flutter_inappwebview,在initialOptions中添加allowFileAccess: true、allowUniversalAccessFromFileURLs: true(仅用于测试,生产环境谨慎使用)。 - 检查项目
index.html中的Content-Security-Policy meta标签,是否存在阻止加载外部资源的规则,可临时放宽测试。
- 对于
- 测试生产构建版本:本地开发服务器的安全限制通常比生产环境严格,执行
flutter build web后将产物部署到静态服务器,再测试加载Google页面。 - 尝试区域镜像域名:若为网络区域限制问题,可替换为对应地区的Google镜像域名,比如
https://www.google.com.hk进行测试。
内容的提问来源于stack exchange,提问作者Ahmar Yousaf
相关产品推荐
相关产品推荐

