Flutter把CORS这锅甩了3年，开发者终于不用自己背了

Flutter web开发者过去3年花在CORS调试上的时间，加起来大概够重写半个框架。现在官方终于掏出一个配置文件，把这事收了尾。

这不是什么新架构，只是一行yaml的事。

Google在2024年底的Flutter 3.24版本中塞进了web_dev_config.yaml，没开发布会，没写博客，文档里埋了半页。直到最近开发者社区挖出来，才发现这功能已经躺了快半年。

以前怎么解决的？三种姿势，个个膈应

第一种，后端改响应头。让运维给API加Access-Control-Allow-Origin，本地开发时要配成*或者你本机IP，上线前再改回去。流程长到能泡三杯咖啡，还容易忘。

第二种，Chrome禁用安全策略。启动参数加--disable-web-security，相当于把浏览器防弹衣脱了。能跑，但每开一次终端都要被安全警告糊脸，且和正常浏览器的Cookie隔离，登录态乱七八糟。

第三种，自己搭反向代理。用nginx或者node写一层转发，配置文件的行数比你的业务代码还长。维护两套端口映射，同事入职先培训"咱们项目的代理怎么起"。

这三种方案有个共同点：Flutter官方装没看见。

现在官方给的解法：一个文件，两条规则

在项目根目录建web_dev_config.yaml，结构长这样：

server:
host: "0.0.0.0"
port: 8000
proxy:
- target: "https://api.yourbackend.com"
prefix: "/api/"
- target: "https://cdn.yourbackend.com"
prefix: "/files/"

Flutter的web开发服务器启动时会自动读这个文件。你的代码里写http.get(Uri.parse('/api/users'))，实际打到的是https://api.yourbackend.com/api/users。

浏览器以为你在请求同源地址，CORS检查直接跳过。后端不需要改任何配置，Chrome不需要脱防弹衣，你不需要维护nginx。

proxy规则支持多组映射。API走一套服务器，静态资源走CDN，文件上传走对象存储，各配各的target和prefix。之前用nginx才能干的流量拆分，现在写几行yaml搞定。

HTTPS本地调试也包了

有些场景必须走安全协议，比如测试OAuth回调或者Service Worker。配置里加两行证书路径：

https:
cert-path: "/path/to/cert.pem"
cert-key-path: "/path/to/key.pem"

自签名证书也能用，Flutter不会再报NET::ERR_CERT_AUTHORITY_INVALID。这对需要模拟生产环境的团队省了不少事。

为什么现在才给？

Flutter web的定位一直很微妙。2019年发布时主打"一份代码跑全平台"，但web端性能问题和生态差距让它长期处于"能跑但不推荐"的状态。CORS这种开发体验细节，优先级自然靠后。

2023年Flutter团队调整架构，把web渲染从HTML DOM切到WASM（WebAssembly，网页端的二进制执行格式），性能追上来之后，才开始补开发工具链的课。web_dev_config.yaml是这系列补丁里的一块，前面还有热重载速度优化、调试器source map修复。

Google工程师Kevin Moore在相关PR下的评论被翻出来：「我们内部项目早就在用类似配置，只是通用化花了点时间。」

换句话说，这功能是Google先吃上了，现在才端出来。

有什么坑？

目前只支持开发环境。flutter build web产出的静态文件不会带这个代理逻辑，上线后该配CORS还得配，或者走正式的网关层。

配置文件的搜索路径是固定的，必须在项目根目录，不能嵌套在config/子文件夹里。大型单体仓库里项目层级深的团队，可能需要建软链接。

Windows路径分隔符曾出过问题，3.27版本才修掉。如果你还在用更早的版本，证书路径建议写绝对路径并转义反斜杠。

社区里有个细节被反复提到：代理规则匹配是前缀优先，不是最长匹配。如果你同时配了/api/和/api/v2/，请求/api/v2/users可能走到第一条规则，取决于yaml里的书写顺序。这和nginx的行为不一样，迁移时需要检查。

Flutter的GitHub仓库里，关于这个功能的最早issue可以追溯到2021年，当时有开发者提议内置代理解决CORS，官方回复是"建议用外部工具"。三年后态度转变，背后是web端使用率的数据变化——据Flutter团队2024年开发者调查，把web作为目标平台的开发者比例从19%涨到了34%。

人数翻倍，噪音足够大，功能就排上队了。

你现在用Flutter web开发时，CORS是怎么处理的？是早就切到这个配置，还在用老办法硬扛，或者干脆避开web端只做移动端？