Views

111 字,阅读约 1 分钟

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.stampflutter_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程序

h4cd avatar
h4cd
This human loves sanbu.