解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE/dist/model/model.gltf.xz’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, chrome-untrusted, https, isolated-app.

问题描述

大概两三周之前我用build打包了一个vue的可视化项目，然后直接把build之后的index.html放到浏览器中打开，报了下面了一个错误，我一直以为是我打包的路径问题，直到今天终于弄清楚了报错的原因
先看下报错：
解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%

原因及解析

在浏览器打开本地的html文件，上面请求的模型资源文件是一个本地文件，协议是file://，如果是在服务器启动的话，则使用的是http或者https协议。
出于安全性考虑， Chrome默认禁止了这种用法，file协议和http/https协议不同，会被Chrome认为是跨域访问，所以会报被CORS(Cross-Origin Resource Sharing，跨域资源共享)的安全策略阻止。
所以才会导致我的页面一直处于加载的状态
解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%

解决办法

先说一下这个问题只会发生在本地，如果是部署到服务器上面，或者是自己在vscode里面通过插件Live Server打开，都是没有问题的
首先声明，这种方式只是暂时的，浏览器一经关闭则不起作用了。
以谷歌浏览器为例
首先，找到你谷歌浏览器浏览器安装的位置，一般默认安装的位置C:\Program Files\Google\Chrome\Application
然后、在该目录打开命令行，直接在文件夹导航栏输入cmd，敲回车
解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%
回车之后就进入了cmd命令行

输入命令 chrome.exe --disable-web-security --user-data-dir=C:\MyChromeUserFata

这个时候谷歌浏览器会重新打开一个窗口
解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%
然后把你本地build之后的index.html文件放到浏览器中就好了

一直困扰我的问题终于解决啦，希望能够帮助到大家文章来源地址https://www.toymoban.com/news/detail-400571.html

到了这里，关于解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！