vscode解决本地浏览器运行项目时的跨域问题-Live server

最新推荐文章于 2024-05-14 17:23:38 发布

国际知名观众

最新推荐文章于 2024-05-14 17:23:38 发布

阅读量2.4k

点赞数 1

分类专栏：前端学习文章标签：前端

本文链接：https://blog.csdn.net/weixin_46447549/article/details/131561787

版权

前端学习专栏收录该内容

4 篇文章 1 订阅

订阅专栏

在使用face-api.js进行前端实时人脸识别时，遇到模型加载的跨域问题。该问题源于尝试从本地文件系统加载模型JSON。解决方案是通过安装VSCode的LiveServer插件，启动本地服务器，从而避免跨域限制。只需在项目中点击Golive，即可在浏览器中无跨域问题地运行应用。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

总结

最近在用face-api.js开发前端的实时人脸识别，加载已经训练好的tf模型，这一步需要加载模型json文件，但是本地测试的时候控制台报错：

Access to fetch at 'file:///D:/html_project/face-api/models/tiny_face_detector_model-weights_manifest.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.

在这里插入图片描述
查找资料发现是跨域问题，正好用的是vscode进行开发，所以解决起来就很方便了，通过一个插件就可以搞定这个问题。插件的名称为Live Server，在扩展里搜索下载后，可以看到使用方法：在项目右下角点击Go live，即可弹出浏览器页面。
在这里插入图片描述