配置Chrome支持本地(file协议)的AJAX请求
什么问题
WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是:
- 新建文件夹
- 新建需要的文件
- 在Sublime(或其他编辑器)中完成DEMO的编码
- 双击HTML文件,直接在浏览器中运行演示
如果此时Demo中有AJAX操作,浏览器就会报一个错:
XMLHttpRequest cannot load file:///Users/iceStone/Documents/Learning/angular/demo/angular-moviecat/movie/view.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
原因很简单,浏览器(Webkit内核)的安全策略决定了file协议访问的应用无法使用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
在某些浏览器中是允许这种操作的,比如Firefox浏览器,也就是说Filefox支持file协议下的AJAX请求。
解决办法
作为我个人最喜欢的Chrome,强大,没什么好说的,只有想不到,几乎没有做不到,所以必须也得支持:
- Windows:
- 设置Chrome的快捷方式属性,在“目标”后面加上--allow-file-access-from-files,注意前面有个空格,重新打开Chrome即可。
- Mac:
- 只能通过终端打开浏览器:打开终端,输入下面命令:open -a "Google Chrome" --args --disable-web-security然后就可以屏蔽安全访问了[ --args:此参数可有可无]
补充说明
长久来看,你肯定是需要通过HTTP的方式访问你的应用,那就需要配置HTTP服务器软件。但是对于一些刚入门的同学,配一个HTTP服务器(比如Apache、IIS等)比较繁琐,望而却步。
- 对于使用IDE的同学没什么好说的,每个用于Web开发的IDE都内置http服务器,不用单独配置。
- 对于喜欢轻量级编辑器的同学,比如Sublime Text,它默认是没有内置HTTP服务器的
接下来推荐一款Sublime的插件Sublime Server
,这个插件可以提供一个静态文件HTTP服务器,具体使用方式如下:
- 安装Package Control(Sublime的插件管理工具),不会安装自行Google
Command+Shift+P
或Ctrl+Shift+P
打开命令面板,输入Package Control: Install Package
- 稍等片刻(此时会连接到插件提供商的服务器,比较慢,有可能背墙),搜索
SublimeServer
- 安装完成过后通过
Tool → SublimeServer → Start SublimeServer
- 一定要用打开文件夹的方式使用Sublime,否则没有办法正常使用SublimeServer。
- 打开HTML文件,在右键菜单中选择
View in SublimeServer
,此时就可以以HTTP方式在浏览器中访问该文件了, - 如果该选项是灰色的,那就说明没有启动SublimeServer,
Tool → SublimeServer → Start SublimeServer
到此为止,你已经可以在Sublime中使用HTTP服务器了。
可能遇到的问题
如果Start SublimeServer
不能点,可能是当前8080
端口被占用了(SublimeServer默认使用8080端口)
解决方法就是打开配置文件将端口修改为其他端口:
以下是我的配置:
{"attempts": 5, "autorun": false, // 是否在启动Sublime时自动启动SublimeServer "defaultExtension": ".html", "interval": 500, "mimetypes": { "": "application/octet-stream", ".c": "text/plain", ".h": "text/plain", ".py": "text/plain" }, "port": 2016 // 端口号 }
当然其他编辑器也有类似的插件。
原文链接
配置Chrome支持本地(file协议)的AJAX请求相关推荐
- electron ajax路径,electron 打包用file协议的ajax请求路径问题
使用electron, 将项目打包成离线应用.使用file协议,在本地读取静态资源.但是ajax请求如果用相对路径,打包之后,会直接找到根目录. // main.js const winURL = p ...
- 解决ajax请求跨域,解决ajax请求跨域
跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足 才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法 方法一 // ajax请求跨域 /* *解决a ...
- ajax请求返回的数据格式,ajax请求服务器返回json数据格式
ajax请求服务器返回json数据格式 内容精选 换一换 消息请求返回的状态码如下表所示. 使用API数据源,您可以通过调用一个第三方的REST(Representational State Tran ...
- ajax.then()用法,使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
- google支持本地ajax,360chrome,google chrome浏览器使用jquery.ajax加载本地html文件
使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...
- [js] ajax请求地址只支持http/https吗?能做到让它支持rtmp://等其它自定义协议吗 ?
[js] ajax请求地址只支持http/https吗?能做到让它支持rtmp://等其它自定义协议吗 ? ajax只支持http/https协议, 可以通过自定义http头来间接支持自定义协议 个人 ...
- 前端接收pdf文件_原生ajax请求获取pdf文件流本地下载(支持谷歌IE)
项目中要实现本地下载pdf文件,ajax请求获取到文件全路径,如上,a标签href属性赋值跳转,在iframe里面,谷歌浏览器被阻止下载.那只能另想办法.经过几天的摸索和后台调整接口数据流,终于解决. ...
- html5支持ajax和jQuery吗,使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery)...
使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery) 诚然,Stack Overflow上有类似的问题,但似乎并 ...
- js ajax的请求地址不正确,使用香草JS AJAX请求访问本地JSON文件时出现CORS错误?...
我正在尝试使用香草JS AJAX请求从本地存储的JSON文件中拉回JSON字符串(特别是尝试不使用JQuery)-以下代码基于此答案 -但我在Chrome控制台中不断收到错误(见下文).有什么想法我要 ...
最新文章
- 3位物理学家获基础物理学特别突破奖
- onvif规范的实现:onvif开发常用调试方法 和常见的segmentation fault错误
- Json,String,Map之间的转换
- 十大排序算法(Java)
- input子系统基础之按键1——什么是input子系统?
- centos 7 菜鸟第一天 装软件
- SAP License:初学作业费用分割
- python和anaconda区别_Pycharm、Anaconda到底是什么?有什么区别?
- 获取(可能)关联数组中的第一个键?
- 「leetcode」234. 回文链表:【数组模拟】【翻转后半部分】详解
- redhat最小化安装是多少包_Linux的最小化安装
- 单细胞测序的入门操作
- linux压缩文件zip,在 Linux 上压缩文件:zip 命令的各种变体及用法
- 高速公路收费标准c语言,c语言课程设计报告-高速公路收费系统
- react加水印_多功能React影像组件(拖拽、水印、缩放、切换、旋转)
- 华东师范大学 计算机 博士 毕业论文,华东师大:1/4博士生完不成论文难毕业
- [Alg]排序算法之分布排序
- MySQL sql语句
- Proxifier使用教程
- flutter显示图标_flutter 引入第三方 Icon 图标(以阿里图标库为例)