素材巴巴 > 程序开发 >

js加载文件跨域报错cross origin requests...

程序开发 2023-09-06 18:29:43

本地Ajax跨域报错Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

照着教程使用D3来加载 json文件和csv文件时,发现并不能成功加载,会报下面这样的错误。
这里写图片描述
因为之前遇到过,大概知道原因在于使用了File协议,应该使用它提示的http, data, chrome, chrome-extension, https这些协议,可是只是写几个小Demo,不至于自己去创建一个服务器,开个端口吧。经过各方检索,发现了如下几种解决方案。

1.换编辑器T_T

使用webstorm或是visual studio这种重量级的IDE的同学,应该不会遇到这种问题,这类IDE都内置了HTTP服务器。
但是对于博主这种喜欢VSCode,sublime这类轻量级编辑器的人,还是想找一下别的解决方案。

2.安装Server插件: )

这里针对VSCode和Sublime安利一款插件。

VSCode

Live Server插件,这个插件功能十分强大,不止可以解决ajax不支持file协议的问题,还可以实现在编辑器里保存修改后,页面自动刷新的功能。具体使用方法在插件安装的地方有说明,用起来也十分简单。
安装完成之后,打开html文件后,点击右下角的GoLive 即可。
这里写图片描述

Sublime

SublimeServer插件,安装完成之后,点击Tools->SublimeServer->Start SublimeServer,启动服务器,然后在html文件中,注意是文件中点击右键,选择 View in SublimeServer即可。
(注意一定要以文件夹的方式打开html文件所在目录,否则可能失效。)
这里写图片描述

3.换浏览器T_T

火狐支持file协议,对Chorme没有什么执念的童鞋,可以换成火狐。

4.配置Chrome浏览器支持file协议

对于想博主这样很喜欢Chrome开发者工具的人,也可以尝试这种方式。

Windows:
设置Chrome的快捷方式属性,在“目标”后面加上–allow-file-access-from-files,注意前面有个空格,重新打开Chrome即可。

Mac:
打开终端,输入下面命令:open -a “Google Chrome” –args –disable-web-security然后就可以屏蔽安全访问了[ –args:此参数可有可无]

PS

只是更改浏览器配置使之支持file协议,还是有很大的局限性的,建议最好采用前两种方式,配置http服务器才是长久之计~


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。