Flutter Web App CORS 问题,本地与 Vercel 部署分别处理
今天记录一下开发 Flutter Web App 的时候遇到的 CORS 问题,以及本地与部署分别处理的方式。
本地调试的时候,可以简单粗暴处理 CORS
- 功能关闭:进入
sdk\packages\flutter_tools\lib\src\web
目录下, 打开 chrome.dart 文件, 搜索--disable-extensions
, 往下添加--disable-web-security
。 这样本地就不用使用安全检测,CORS 也被无视了 - 清一下缓存:进入
sdk\bin\cache
目录下,删除flutter_tools.stamp
和flutter_tools.snapshot
文件 - 重启项目
这部分操作也是我网上找的资料,一击命中,挺好的,感谢:Flutter Web 本地调试跨域问题解决
用 Vercel 部署 App 时,处理 CORS
线上部署我这里用的是 Vercel,它有自己的 CORS 处理方式,简单来讲就是:
Vercel 的方式是需要 api/
目录下创建路由 handle(proxy 去代理),然后把原来直接请求目标地址的地方,改成请求这里,让这个 handle 来中间路由一下。
值得一提的是,如果要处理多个路由,比如你 App 里会访问不同的域,那么你就可以在 api/
目录下创建多个路由 handle,然后分别处理。
当然了,这是“精细化”控制不同域的方式,
我猜测,假如我 proxy 直接把目标地址
设定为“所有”之类的,那么应该就能粗暴地无视所有 CORS,无差别处理。
不过这我倒还没尝试,有兴趣可以去玩玩。
btw,Vercel 部署 Flutter Web app
这一处相信也有很多人会遇到问题,我这里也顺便记录一下之前我找资料后的完美处理方式:
在部署的时候,Vercel 会给一些配置选项,按这么填写即可:
- Build command:
flutter/bin/flutter build web --release
- Output directory:
build/web
- Install command:
if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git ; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web
这块资料来自:通过Vercel部署Flutter Web程序