什么问题

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+PCtrl+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请求的更多相关文章

  1. 配置chrome支持本地(file协议)ajax请求

    将html代码拖拽进入chrome通过file协议浏览时,发送的ajax请求本地文件,会报跨域错误. XMLHttpRequest cannot load file:///E:/webs/extJS/ ...

  2. HTTP协议、Ajax请求

    今天这篇文章呢,主要讲的就是关于HTTP协议.Ajax请求以及一些相关的小知识点.虽然内容不算多,可是是很重点的东西~ HTTP协议 1. http:超文本传输协议.简单.快速.灵活.无状态.无连接. ...

  3. 通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转

    在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...

  4. 让chrome支持本地Ajax请求

    Chrome的安全机制不能支持ajax的本地访问, 例如: 在JavaScript里面访问 URL:file:///E:/test.html,Chrome 浏览器报错:XMLHttpRequest c ...

  5. 让新版Chrome支持本地跨域请求调试

    1.创建一个Chrome的启动快捷方式: 2.右键点击快捷方式属性,然后在目标路径后面,添加以下参数: --disable-web-security --user-data-dir="e:\ ...

  6. chrome实现全浏览器跨域ajax请求

    如图,在chrome快捷方式上打开属性栏,在‘目标’栏加上后缀--disable-web-security --user-data-dir.即可实现在此浏览器上所有网页的跨域请求.

  7. 转贴:JavaScript实现Ajax请求简单示例

    转至:https://my.oschina.net/u/658145/blog/167651 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...

  8. Spring Security登录超时,angular ajax请求出错自动跳转至登录页(jQuery也适用)

    公司开发采用Spring Security+AngualerJS框架,在session过期之后,ajax请求会直接出错.本文介绍如何实现出错情况下自动跳转至登录页. 整体思路是,session过期后, ...

  9. 配置Chrome启动参数支持本地AJAX请求,解决XMLHttpRequest cannot load file..,Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest':.. 问题

    直接将本地的HTML文件拖拽到Chrome浏览器中运行时,发送的AJAX请求本地文件,会报跨域错误: 报错的原因是:Chrome默认不支持本地的AJAX请求! 解决问题的办法是:给Chrome浏览器添 ...

随机推荐

  1. HTML5 progress和meter控件

    在HTML5中,新增了progress和meter控件.progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装.文件的复制等场景的进度.meter控件为计量条控件,表示某 ...

  2. 【WCF】错误协定声明

    在上一篇烂文中,老周给大伙伴们介绍了 IErrorHandler 接口的使用,今天,老周补充一个错误处理的知识点——错误协定. 错误协定与IErrorHandler接口不同,大伙伴们应该记得,上回我们 ...

  3. Mysql事务探索及其在Django中的实践(二)

    继上一篇<Mysql事务探索及其在Django中的实践(一)>交代完问题的背景和Mysql事务基础后,这一篇主要想介绍一下事务在Django中的使用以及实际应用给我们带来的效率提升. 首先 ...

  4. 安卓易学,爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路

    针对手游的性能优化,腾讯WeTest平台的Cube工具提供了基本所有相关指标的检测,为手游进行最高效和准确的测试服务,不断改善玩家的体验.目前功能还在免费开放中. 点击地址:http://wetest ...

  5. WebForm获取GET或者POST参数到实体的转换,ADO.NET数据集自动转换实体

    最近在修改维护以前的webform项目(维护别人开发的.....)整个aspx没有用到任何的控件,这个我也比较喜欢不用控件所以在提交信息的时候需要自己手动的去Request.QueryString[] ...

  6. 《JavaScript设计模式 张》整理

    最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...

  7. 文件随机读写专用类——RandomAccessFile

     RandomAccessFile类可以随机读取文件,但是在测试中并不好用;File类可以测试文件存不存在,不存在可以创建文件;FileWriter类可以对文件进行重写或者追加内容;FileReade ...

  8. DDD领域驱动设计 - 设计文档模板

    设计文档模板: 系统背景和定位 业务需求描述 系统用例图 关键业务流程图 领域语言整理,主要是整理领域中的各种术语的定义,名词解释 领域划分(分析出子域.核心域.支撑域) 每个子域的领域模型设计(实体 ...

  9. Flexible 弹性盒子模型之CSS flex-shrink 属性

    实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 - ...

  10. css3更改input单选和多选的样式

    在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...