Chrome浏览器HTML支持本地(file协议)的AJAX请求

简介: Chrome浏览器HTML支持本地(file协议)的AJAX请求

问题

在运行html demo页面时,当demo页面中使用file来引入js(jQuery)来进行ajax请求资源时,会出现如下错误:


Access to XMLHttpRequest at 'file:///Users/zzs/develop/softs/dwz/dwz_jui/dwz.frag.xml?_=1553419402393' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

1

原因很简单,浏览器(Webkit内核)的安全策略决定了file协议访问的应用无法使用XMLHttpRequest对象。尝试了一下Firefox浏览器,没有发现此问题。


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


解决方法

设置Chrome浏览器,让其支持file协议的方案。


Windows下:

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


Mac下:

1、创建MyChromeDevUserData文件夹,用来保存关闭安全策略后的用户信息的,名字可以随意取,位置也可以随意放。


image.png2、关闭安全策略代码


打开命令行窗口,执行如下命令。注意,此处需要修改对应路径。


open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/LeoLee/Documents/MyChromeDevUserData

image.pngimage.pngimage.png

chrome插件解决

在插件商城搜索,获得如下插件:image.png具体使用方法参考,插件的相关操作描述。image.pngimage.png

目录
相关文章
|
16天前
|
数据采集 存储 运维
无头浏览器与请求签名技术
本文分享了在面对Cloudflare防护(如Amazon网站)时,如何通过无头浏览器、请求签名技术和爬虫代理IP实现数据采集的故障排查与改进方案。首先,介绍了从常规请求失败到引入Selenium无头浏览器的过程,解决了Cookie和User-Agent检测问题。接着,通过生成请求签名绕过二次验证,并利用代理IP规避访问风险。最后,提出了架构改进方案,包括无头浏览器集群化、签名算法优化、代理池管理和多层次容错机制,以提高系统的稳定性和扩展性。示例代码展示了如何设置代理、获取Cookie并生成签名,成功采集商品信息。
无头浏览器与请求签名技术
|
2月前
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
208 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
2月前
|
Web App开发 安全 前端开发
一个接口4个步骤轻松搞定最新版Chrome、Edge、Firefox浏览器集成ActiveX控件
目前的浏览器市场,谷歌浏览器占据了半壁江山,因此,谷歌也是最有话语权的,2015年开始取消支持 NPAPI 插件,2022 年10月停止支持 PPAPI 插件;而曾经老大哥IE浏览器也已停止服务,退出历史舞台,导致大量曾经安全、便捷的ActiveX控件无法使用。为了解决这个难题,本人特研发出allWebPlugin中间件,重新让所有ActiveX控件能在谷歌、火狐等浏览器使用。
|
2月前
|
Web App开发 数据采集 JavaScript
Chrome浏览器实例的TypeScript自动化脚本
Chrome浏览器实例的TypeScript自动化脚本
|
4月前
|
移动开发 前端开发 JavaScript
HTML5 浏览器支持1
现代浏览器普遍支持HTML5,但早期浏览器可能不支持。可以通过将HTML5元素定义为块级元素,使旧版浏览器也能正确显示。例如,可以使用CSS将header、section等8个新的HTML5语义元素设置为块级元素。此外,还可以通过JavaScript为HTML添加新的自定义元素,如使用`document.createElement("myHero")`为IE浏览器添加新元素。
|
4月前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
546 2
|
4月前
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
3417 2
|
4月前
|
存储 移动开发 前端开发
|
6月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
781 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
|
4月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
680 9