Flutter web踩坑记录

从移动端应用转web应用

在终端输入flutter config --enable-web, 允许web端应用即可, 然后重启编译器, 使用flutter devices即可看到chrome, 在终端输入flutter create .即可生成web文件夹, 使用flutter run -d Chrome即可进行web版进行开发. 然而我一开始在设备中始终无法显示chrome, 最后在Flutter的Github上找到了问题, flutter-web只能在稳定版上运行, 切换到master即可. 最后成功运行.

无法请求数据

在移动端模拟器上都可以正常请求数据, 为什么在web上就不行了? 首先如果你用的dio, 先检查dio是不是3.x.x版本. 升级完成后接着报错XMLRequestError, 这是由于跨域访问造成的, 需要服务端在response的header中设置Access-Control-Allow-Origin. 这里可使用Charles来进行调试, 选中Tools->rewrite, 按步骤执行.

第一步

第二步

需要添加的内容有:

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: authorization
Access-Control-Allow-Methods: OPTIONS,HEAD,GET,PUT,POST,DELETE,PATCH

注意: 如请求包含一些自定义header, 需要在Access-Control-Allow-Headers中将这些header的key全部包含进去.

目前就是这么些问题了, 如果还有遇到的再来补吧...