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端只做移動端？