Flutter web 跨域

最新推荐文章于 2025-08-06 10:08:31 发布
原创 最新推荐文章于 2025-08-06 10:08:31 发布 · 3.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#chrome #跨域 #Flutter #web

在使用Flutter for Web开发过程中，遇到调用第三方API的跨域问题。文章分享了通过设置Chrome启动项、修改源代码及安装插件等尝试解决跨域的方法，最终采用dart中间件服务实现跨域调试。

最近在使用flutter for web开发项目，遇到了调用第三方api跨域的问题，由于不能够修改第三方服务器的同源策略。只能在本地寻找Flutter的跨域解决方案，找了很多文章，终于在yk3372大神的 https://juejin.im/post/5e5d1674e51d4526c1481991 方案中，实现了跨域调试。

Chrome虽然可以设置 --disable-web-security --user-data-dir 命令跨域启动，具体设置方式不再做赘述，但是我用的是VSCode，直接run起来的Chrome是没有跨域启动的，虽然我也尝试了去修改flutter根目录的Chrome.dart源文件，但是好像并没有起到什么效果。https://www.jianshu.com/p/a7e4dc5b61f6，具体设置方式在这片博客有介绍，我也尝试了yk3372所说的安装Chrome插件的方式，还是同样的问题，run起来的Chrome没有开启插件选项，同时也关闭了下图所示的各种launch选项，run起来依旧是没有插件可以选择，跨域模式也同样没有启动，按道理来说，设置Chrome的启动项是可以实现跨域模式启动，即使打开--disable-web-security这一选项依旧没有生效，目前还找不到原因，有知道的小伙伴可以下方留言交流探讨。

最终还是采用了 dart设置中间件服务的方式，实现了跨域调试。具体实现方式可以去 https://juejin.im/post/5e5d1674e51d4526c1481991  这里查看。

解决Flutter在WEB中加载图片的跨域问题
jingyi__的博客
02-01 3934
Flutter版本：3.16.9开发IDE：android studio 2023.1.1 Patch2受影响环境：WEB (Android、IOS、Windows等都不受影响)IDE输出的错误： 如果图片在应用内存中有编码后的字节信息、或者以 asset 的方式提供、或者和应用存储在同一服务器上（也就是同源），则不需要做额外工作。图片既可以在 HTML 也可以在 CanvasKit 模式下，使用 Image.memory、 Image.asset 和 Image.network 来展示。
Flutter 跨平台开发之路七 跨域访问
ln_chenchao的博客
09-18 844
跨域访问，jsonp，CORS 跨域资源共享，服务器proxy，服务器代理，Dio，dio，原生平台跨域访问，h5平台跨域访问
flutter for web 带cookie的网络请求跨域问题处理
xxx_19942的博客
09-01 2616
学习flutter 已经有一段时间了，然后今年三月份flutter 2.0正式的支持之后，一直想尝试flutter web，但是奈何没有时间，最近正好有时间了，于是把自己的一个移动端项目改了改之后，打算编译运行成web项目。本来前面都还算比较顺利的，就是改了一些以前移动端的特有的一些功能之外，没有什么特别的改动，有问题看着报错都可以自行解决的。 当一切准备就绪项目跑起来之后，因为有调用服务器接口，然后本地run就出现了跨域问题。然后因为自己一直没有接触过前端，所以只是知道有跨域这么一说，但是没有了解过，因
Flutter：web项目跨域问题解决
qq_23404533的博客
12-11 5615
前后端解决系列。
Flutter web端 跨域问题处理
it_xiaozhi的博客
06-18 4119
最近开始打包web端项目，遇到了 Flutter dio XMLHttpRequest error ，dio请求文本跨域的问题。 跨域问题对于做过前端的基本还是很简单，有各种方式去解决接口的跨域问题，针对没有前段经验的Flutter开发，可选择的方案就相对没有那么多了。一下列出我的解决方案以供分享（2021.06.18） 1.找到Flutter SDK目录下的chrome.dart 文件 然后’–disable-translate’下面位置添加 ‘–disable-web-security’,如下图 2.
Flutter Web 在《一起漫部》的性能优化探索与实践
yiqimanbu的博客
10-13 1060
不久前，App 小组面临一场开发挑战，即『一起漫部』需要在 App 的基础上开发出一套 H5 版本。由于一起漫部 App 版本是使用 Flutter 技术开发的，对于 H5 版本的技术选型，Flutter Web 成为我们的第一选择对象。
web前端跨域取JSON
02-04
在Web开发中，"跨域取JSON"是一个重要的概念，特别是在前端开发中。"跨域"是指一个域名下的网页尝试访问另一个域名下的资源时，由于浏览器的安全策略限制，这种行为通常会被禁止，这就是所谓的同源策略（Same-origin...
Flutter web app三端跨平台双向桥接dart web开发
ypppk的博客
05-31 3016
Flutter web app三端跨平台双向桥接dart web开发 环境及项目运行步骤： 1、安装开发工具webstorm 2、官网下载flutter stable-1.5.4，安装好并配置环境变量 3、执行cmd命令：pub global activate webdev 4、执行cmd命令：pub global activate stagehand 5、创建好Flutter web app项目...
flutterWeb 请求跨域问题解决方案
qq_43981836的博客
06-08 2538
flutterWeb跨域
Flutter for web 跨域请求解决方案
xfnbing的专栏
06-08 3640
这里使用nodejs服务器实现跨域，原理是flutter代码直接跑到nodejs代理服务器上，这样不用内部局域网跨域，然后通过代理对应用的请求进行转发。 nodejs代码： let http = require('http') let fs = require('fs') let conifg = require('./proxy-conf') let app = http.createServer ( function(request,response){ let url = requ
Flutter for Web 解决跨域问题支持浏览器本地运行以及打包部署到Web服务端
热门推荐
Simon的专栏
12-10 1万+
在已有的Flutter项目上运行Web支持 Flutter for Web 静态页面run起来基本没啥问题，但是加上接口调数据的时候，却遇到了浏览器跨域问题。 跨域问题1：CROS 解决方案： 有三种解决方案： A、安装浏览器拓展插件moesif-orign-cors-changer（简单配置几个数据） B、配置Nginx（配置太多了）、 C、使用shelf_proxy插件 我选的C方案 1.在项目的 pubspec.yaml 中添加这样的一行： dependencies: shelf_proxy:
Flutter Web本地测试跨域问题
qq_45186002的博客
11-10 1081
Flutter Web 跨域测试
Flutter开发调试Web跨域解决方案
qq_32876451的博客
06-10 1170
如题： Flutter SDK文件路径：Flutter/packages/flutter_tools/lib/src/web/chrome.dart 添加 ： ‘–disable-web-security’, 如图： 删除路径：Flutter\bin\cache
Flutter Web跨域问题解决方案
wlnWLN124的博客
09-20 768
Flutter web 跨域
解决flutter浏览器(web)调试跨域问题和 打包后安装在手机后无法访问网络的问题
qq_18367465的博客
07-22 1824
开发中使用android仿真机测试没有问题，但是在浏览器上测试时访问网络会提示一个错误入如下： 翻译: 浏览器错误提示： 明显就是跨域问题。修改在flutter sdk路径下D:\xxxxx\xxxx\flutter\packages\flutter_tools\lib\src\web的chrome.dart文件，在如图位置添加 ‘–disable-web-security’, 。 然后需要删除如图两个文件： 然后重新运行项目即可。这里忘记截图，给出解决方案。如图路径下修改 AndroidManife
flutter 解决跨域问题
zoujiawei6的博客
09-24 1127
【代码】fltter解决跨域问题。
Flutter如何支持浏览器跨域
feiyingliao的专栏
07-18 1251
当使用 flutter 构建 web 项目，直接运行在 chrome 浏览器发出网络请求会发生跨域错误strict-origin-when-cross-origin（CROS），比如在 dart 代码直接用dio.get("https://www.yunfuit.com")，dio 会报错，在 chrome 的 DevTools 中会发现 CROS 错误。
flutter开发web应用支持浏览器跨域设置
11-15 2018
开发web应用难免会遇到跨域问题，所以flutter设置允许web跨域的设置是要在你的flutter安装路径下面 flutter\bin\cache 找到flutter_tools.stamp文件，然后删除掉：这个文件是临时缓存文件。
Flutter解决web调试跨域问题
投投的博客
08-06 403
摘要：本文介绍了Flutter Web本地开发中的跨域解决方案。通过配置Flutter运行脚本（指定web-hostname、端口和代理地址），并创建Node.js代理服务器（使用express和http-proxy-middleware），将API请求转发至目标服务器。代理服务器通过cors中间件处理跨域，同时提供请求日志和错误处理功能。最后通过curl命令验证代理是否生效。该方法既支持开发调试，也可托管生产环境文件。
flutter 与web交互
最新发布
11-13
<think> 我们正在处理用户关于Flutter与Web交互的查询。根据提供的引用，我们可以总结出几种Flutter与Web交互的方法： 1. **MethodChannel（方法通道）**：这是Flutter与原生平台（Android/iOS）通信的标准方式。但若涉及Web，可能需要通过JavaScript作为中转（如引用[2]所示）。 2. **JavaScript交互**：在Web平台上，Flutter可以通过`dart:js`库调用JavaScript函数，反之亦然。引用[2]展示了Flutter调用JavaScript函数的示例。 3. **EventChannel（事件通道）**：用于持续的事件流通信，但引用中未直接提及在Web上的使用。 4. **使用第三方库（如flutter_inappwebview）**：引用[3]提到使用`flutter_inappwebview`库，该库提供了更强大的WebView功能，并支持Flutter与Web页面之间的通信。 根据引用内容，我们特别关注在Web平台上的交互： - **Flutter调用JavaScript**：使用`dart:js`库，例如： ```dart import 'dart:js' as js; // 调用全局JavaScript函数 var result = js.context.callMethod('getSearchData'); ``` - **JavaScript调用Flutter**：在Web平台上，可以通过注册Flutter函数为JavaScript可调用的函数。这通常使用`dart:js`库中的`allowInterop`或`allowInteropCaptureThis`函数将Dart函数包装成JavaScript函数。 另外，引用[3]提到的`flutter_inappwebview`库提供了一种通过WebView进行通信的方式。例如，在WebView中加载的网页可以通过JavaScript与Flutter代码通信。 ### 实现步骤 #### 1. Flutter调用JavaScript - 在Flutter代码中，使用`js.context.callMethod`调用全局JavaScript函数。 - 确保在Web页面上定义了相应的JavaScript函数。 #### 2. JavaScript调用Flutter - 使用`dart:js`将Dart函数暴露给JavaScript： ```dart // 定义一个Dart函数 void myDartFunction() { print('JavaScript调用了Dart函数！'); } // 将Dart函数暴露给JavaScript，使其成为全局可调用 js.context['myGlobalDartFunction'] = js.allowInterop(myDartFunction); ``` 然后在JavaScript中，可以直接调用`window.myGlobalDartFunction()`。 #### 3. 使用flutter_inappwebview（用于WebView内嵌网页的通信） - 在`pubspec.yaml`中添加依赖： ```yaml dependencies: flutter_inappwebview: ^6.0.0 ``` - 在Flutter中使用`InAppWebView`组件，并设置`javascriptEnabled: true`，然后通过`onWebViewCreated`事件获取WebViewController，使用`addJavaScriptHandler`注册可以被JavaScript调用的函数。 - 在Web页面中，使用`window.flutter_inappwebview.callHandler`来调用Flutter中注册的函数。 ### 代码示例 #### 示例1：Flutter调用JavaScript函数（Web平台） **Flutter端代码:** ```dart import 'dart:js' as js; void callJS() { // 调用名为'alertMessage'的JavaScript函数，并传递参数 js.context.callMethod('alertMessage', ['Hello from Flutter!']); } ``` **Web页面中的JavaScript代码:** ```javascript function alertMessage(message) { alert(message); } ``` #### 示例2：JavaScript调用Flutter函数（Web平台） **Flutter端代码:** ```dart import 'dart:js' as js; void setupExposedFunction() { // 将Dart函数暴露给JavaScript js.context['showMessage'] = js.allowInterop((String message) { print('JavaScript says: $message'); }); } ``` **Web页面中的JavaScript代码:** ```javascript // 调用Flutter暴露的函数 window.showMessage('Hello from JavaScript!'); ``` #### 示例3：使用flutter_inappwebview进行通信 **Flutter端代码:** ```dart import 'package:flutter_inappwebview/flutter_inappwebview.dart'; InAppWebView( initialData: InAppWebViewInitialData(data: """ <html><body> <button onclick="callFlutter()">Call Flutter</button> <script> function callFlutter() { window.flutter_inappwebview.callHandler('handlerName', 'Hello from WebView!'); } </script> </body></html> """), onWebViewCreated: (controller) { controller.addJavaScriptHandler( handlerName: 'handlerName', callback: (args) { print('Received from WebView: ${args[0]}'); return 'Hi from Flutter!'; }); }, ) ``` ### 注意事项 - 在Web平台上，Flutter与JavaScript的交互需要确保JavaScript代码在全局作用域（window）上可用。 - 使用`flutter_inappwebview`时，注意版本和平台支持。 - 跨平台开发时，注意不同平台（Android, iOS, Web）的实现差异。 以上内容根据引用[1][2][3]整理，并提供了具体的实现方法和代码示例。 [^1]: Flutter学习之旅之Flutter和Android原生实现数据交互的MethodChanel和EventChannel方式的简单整理。 [^2]: 【Flutter】FlutterWeb与Js交互。 [^3]: Flutter与Web通信，使用flutter_inappwebview库。 §§相关问题§§ 1. Flutter与原生平台（Android/iOS）交互和与Web交互有什么主要区别？ 2. 如何在Flutter Web中处理跨域问题？ 3. 除了`flutter_inappwebview`，还有哪些第三方库支持Flutter与Web的交互？ </think> ### Flutter 与 Web 交互的方法和实现 Flutter 与 Web 的交互主要通过以下三种方式实现，每种方式适用不同场景： --- #### 方法 1：**JavaScript 桥接（基础交互）** 通过 `dart:js` 库实现双向通信，适合轻量级交互： ```dart // Flutter 调用 JavaScript import 'dart:js' as js; void callJS() { // 调用全局 JS 函数 js.context.callMethod('showAlert', ['Hello from Flutter!']); } // JavaScript 调用 Flutter void exposeDartFunction() { js.context['onFlutterEvent'] = js.allowInterop((data) { print('JS 传递的数据: $data'); }); } ``` **Web 端 JavaScript 示例**： ```javascript // 被 Flutter 调用的函数 function showAlert(message) { alert(message); } // 调用 Flutter 暴露的函数 window.onFlutterEvent("Data from JS"); ``` --- #### 方法 2：**WebView 深度集成** 使用 **[flutter_inappwebview](https://pub.dev/packages/flutter_inappwebview)** 库实现复杂交互： ```dart InAppWebView( initialUrlRequest: URLRequest(url: Uri.parse("https://your-web-page")), onWebViewCreated: (controller) { // 注册 Flutter 方法供 JS 调用 controller.addJavaScriptHandler( handlerName: 'flutterHandler', callback: (args) { print('JS 调用参数: ${args[0]}'); return {'response': 'Flutter 已接收'}; }, ); }, onLoadStop: (controller, url) { // 调用 Web 中的 JS 函数 controller.evaluateJavascript(source: "window.postMessage('Flutter 消息')"); }, ) ``` **Web 端配合代码**： ```javascript // JS 调用 Flutter 方法 window.flutter_inappwebview.callHandler('flutterHandler', {key: 'value'}); // 接收 Flutter 消息 window.addEventListener('message', (event) => { console.log(event.data); }); ``` --- #### 方法 3：**MethodChannel + 原生层中转** 适合需要访问原生功能的场景（Android/iOS）： ```dart // Flutter → 原生 → Web const channel = MethodChannel('com.example/bridge'); channel.invokeMethod('callJS', 'Flutter数据'); // 原生层 (Android 示例) webView.evaluateJavascript("receiveFromFlutter('" + data + "')", null); ``` --- ### 选择建议 | 场景 | 推荐方式 | 特点 | |-----------------------|------------------------|----------------------------------| | 轻量级通信 | JavaScript 桥接 | 无需依赖库，适合简单数据传递 | | 嵌入式 WebView 交互 | flutter_inappwebview | 功能最强大，支持双向实时通信 | | 需访问原生硬件 | MethodChannel 中转 | 兼容性好，适合跨平台复杂场景 | > 注意：Web 平台交互需在 `web/index.html` 中引入相关 JS 函数，并处理跨域问题[^1][^2][^3]。 [^1]: Flutter 学习之旅 之 Flutter 和 Android 原生实现数据交互的简单整理。 [^2]: FlutterWeb 与 Js 交互需要 js 作为中转。 [^3]: Flutter 与 Web 通信推荐使用 flutter_inappwebview。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值