Ajax跨域解决方案

By yesmore on 2021-07-21
阅读时间 2 分钟
文章共 622
阅读量

本地 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.