本地 Ajax 跨域报错 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
当我们在做练习或者写 Demo 的时候,有访问本地文件的需求,当我们在加载的时候发现不能加载,会报如下错误:
根据错误信息大概知道原因在于使用了 File 协议,应该使用它提示的 http, data, chrome, chrome-extension, chrome-untrusted, https 这些协议,可是只是做个练习,写些小 Demo,不至于自己去创建一个服务器,开个端口。那么应该如何解决这个问题呢?各位看官,往下看。
1.换编辑器
使用 webstorm 或是 visual studio 这种重量级 IDE 的同学,应该不会遇到这种问题,这类 IDE 都内置了 HTTP 服务器。
但是对于一些喜欢使用 VSCode,Sublime Text 这类轻量级编辑器的同学,我们继续往下看。
2.安装Server插件
这里针对 VSCode 和 Sublime 分别安利一款插件。
VSCode
Live Server 插件,这个插件功能十分强大,不止可以解决 ajax 不支持 file 协议的问题,还可以实现在编辑器里保存修改后,页面自动刷新的功能。具体使用方法在插件安装的地方有说明,用起来也十分简单。
安装完成之后,打开 html 文件后,点击右下角的 GoLive 即可。
Sublime
SublimeServer 插件,安装完成之后,点击 Tools->SublimeServer->Start SublimeServer,启动服务器,然后在 html 文件中,注意是文件中点击右键,选择 View in SublimeServer 即可。
(注意一定要以文件夹的方式打开 html 文件所在目录,否则可能失效。)
3.换浏览器
火狐支持 file 协议,对 Chorme 没有什么执念的童鞋,可以换成火狐。
4.配置Chrome浏览器支持file协议
如果你是那种非常喜欢 Chrome 开发者工具的人,也可以尝试如下方式。
Windows:
设置 Chrome 的快捷方式属性,在“目标”后面加上–allow-file-access-from-files,注意前面有个空格,重新打开 Chrome 即可。
Mac:
打开终端,输入下面命令:open -a “Google Chrome” –args –disable-web-security 然后就可以屏蔽安全访问了[ –args:此参数可有可无]
后记
只是更改浏览器配置使之支持 file 协议,还是有很大的局限性的,建议最好采用前两种方式,配置 http 服务器才是长久之计。
Tips: Please indicate the source and original author when reprinting or quoting this article.