打开网易新闻 查看精彩图片

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,文件上传走对象存储,各配各的targetprefix。之前用nginx才能干的流量拆分,现在写几行yaml搞定。

HTTPS本地调试也包了

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端只做移动端?