从存储中加载 .pbf 会导致 CORS 错误答案

【问题标题】：Loading a .pbf from storage results in CORS error从存储中加载 .pbf 会导致 CORS 错误
【发布时间】：2018-02-14 14:04:11
【问题描述】：

我在 Vue.js 应用程序中使用 Mapbox GL JS 来渲染 (.vector).pbf 文件。现在，使用我们的内部 API 从 mbtiles 文件中获取切片可以很好地渲染和使用切片，但是数据也应该可以离线访问。所以我制定了一种方法来从 mbtiles 文件中获取 pbf 文件并将它们压缩在一起以在设备上解压。（立即打包 mbtiles 文件是不可行的，因为它只有不到 1 GB 大，而且不是所有东西都需要，所以我们正在提取我们需要的东西。）

现在这是我的“问题”出现的地方。使用以下结构会导致 CORS 错误，即使它是从本地存储加载的：

tilesUrl = "file://" + this.$root.local + "tiles/{z}/{y}/{x}.vector.pbf"

这个网址是有意义的，看起来像这样：

file:///storage/emulated/0/Android/data/com.someCompany.someApp/files/active/tiles/{z}/{y}/{x}.vector.pbf

但是，当我构建它并尝试通过我们正在使用的 web 视图运行它时，它会不断抛出有关 CORS 的错误。但是，我们在加载图像、视频和 json 时也是这样做的。然而，只有在 pbf 文件上才会引发 CORS 错误。为什么？

【问题讨论】：

标签： android mapbox-gl-js

【解决方案1】：

即使标头在请求中，CORS 错误也会占上风，因为响应是它想要的标头。由于它无法通过 file:// 方案应用该标头，因此它不会接受从本地存储加载的任何内容。解决方法是在设备本身上托管一个简单的 HTTP 服务器，例如 AndroidAsync

【讨论】：