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

目录
相关文章
|
XML 前端开发 JavaScript
|
11月前
|
数据采集 Web App开发 前端开发
处理动态Token:Python爬虫应对AJAX授权请求的策略
处理动态Token:Python爬虫应对AJAX授权请求的策略
GET与POST之间的差异:为何GET请求的参数在浏览器历史记录中被完整保留,而POST的不被保留?
基于以上,我们可以得出结论:GET请求的参数在浏览器历史记录中之所以能被完整保存,系其请求设计之本质。另一方面,POST请求的参数不被保存,也同样源于其设计目标和工作原理的考虑。
397 12
|
数据采集 存储 运维
无头浏览器与请求签名技术
本文分享了在面对Cloudflare防护(如Amazon网站)时,如何通过无头浏览器、请求签名技术和爬虫代理IP实现数据采集的故障排查与改进方案。首先,介绍了从常规请求失败到引入Selenium无头浏览器的过程,解决了Cookie和User-Agent检测问题。接着,通过生成请求签名绕过二次验证,并利用代理IP规避访问风险。最后,提出了架构改进方案,包括无头浏览器集群化、签名算法优化、代理池管理和多层次容错机制,以提高系统的稳定性和扩展性。示例代码展示了如何设置代理、获取Cookie并生成签名,成功采集商品信息。
514 6
无头浏览器与请求签名技术
|
Web App开发 数据采集 前端开发
Python + Chrome 爬虫:如何抓取 AJAX 动态加载数据?
Python + Chrome 爬虫:如何抓取 AJAX 动态加载数据?
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
342 22
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
233 18
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
274 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
330 2
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
458 4