
Flutter Web 开发:解决跨域(CORS)问题的方法
在 Flutter Web 开发过程中,默认情况下浏览器会遵循同源策略。当你的应用尝试加载不同域名的网络资源(如 API 接口、图片等)时,经常会遇到 CORS(跨域资源共享) 错误,导致请求失败。
虽然生产环境应由后端配置 CORS 头来解决,但在本地开发和调试阶段,我们可以通过修改 Flutter 工具链源码来临时禁用浏览器的安全策略,从而顺利调试。
以下是详细的操作步骤:
🛠️ 操作步骤
第一步:定位 chrome.dart 文件
首先,你需要找到 Flutter SDK 中负责启动 Chrome 浏览器的配置文件 chrome.dart。
参考路径(请根据你的实际安装路径调整):
<你的 Flutter 安装目录>\packages\flutter_tools\lib\src\web\chrome.dart
示例:E:\app\flutter-sdk\flutter_flutter\packages\flutter_tools\lib\src\web

第二步:修改源码以禁用安全策略
打开 chrome.dart 文件,找到构建 Chrome 启动参数(arguments)的地方。通常在 _findChromeArgs 或类似的方法中。
在参数列表中添加 '--disable-web-security' 标志。
修改代码示意:
// 在 arguments 列表中添加以下行
'--disable-web-security',

⚠️ 注意:此操作会禁用浏览器的同源策略,仅建议在本地开发调试时使用,切勿将此类配置打包发布到生产环境。
第三步:清除 Flutter 缓存
修改完 SDK 源码后,Flutter 可能会继续使用旧的编译缓存。为了让修改生效,必须删除相关的缓存文件。
- 需要删除的文件:
flutter_tools.snapshot




