浏览器默认禁止跨域请求解决办法

在chrome运行项目时、如果demo中有Ajax操作浏览器就会报一个错:
AccesstoXMLHttpRequestat’file:///C:/Users/14524/Desktop/QQ%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/source/musiclist.json’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

原因:浏览器(Webkit内核)的安全策略默认禁止了file协议访问的应用无法使用XMLHttpRequest对象(XMLHttpRequest 对象用于在后台与服务器交换数据),错误消息中也很清楚的说明了:
Cross origin requests are only supported for protocol schemes: http,data, chrome, chrome-extension, https, chrome-extension-resource.

跨域请求仅支持协议:http, data, chrome, chrome-extension, https,chrome-extension-resource

解决办法

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章