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

目录
相关文章
|
21天前
|
数据采集 Web App开发 前端开发
处理动态Token:Python爬虫应对AJAX授权请求的策略
处理动态Token:Python爬虫应对AJAX授权请求的策略
|
11月前
|
XML 前端开发 JavaScript
|
12月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
141 22
|
12月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
101 18
|
10月前
|
JSON 前端开发 JavaScript
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
149 0
|
11月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
171 2
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
146 10
React技术栈-react使用的Ajax请求库实战案例
|
12月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
209 4
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
113 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
12月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
510 1