什么问题

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. JavaScript Math和Number对象

    目录 1. Math 对象:数学对象,提供对数据的数学计算.如:获取绝对值.向上取整等.无构造函数,无法被初始化,只提供静态属性和方法. 2. Number 对象 :Js中提供数字的对象.包含整数.浮 ...

  2. C++随笔:.NET CoreCLR之GC探索(1)

    一直是.NET程序员,但是.NET的核心其实还是C++,所以我准备花 一点时间来研究CoreCLR和CoreFX.希望这个系列的文章能给大家带来 帮助. GC的代码有很多很多,而且结构层次对于一个初学 ...

  3. 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack

    因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...

  4. await and async

    Most people have already heard about the new “async” and “await” functionality coming in Visual Stud ...

  5. jQuery禁用或启用

    禁用:.attr("disabled","disabled"); 启用:.removeAttr("disabled");

  6. maven 快照

    大型应用软件一般由多个模块组成,一般它是多个团队开发同一个应用程序的不同模块,这是比较常见的场景.例如,一个团队正在对应用程序的应用程序,用户界面项目(app-ui.jar:1.0) 的前端进行开发, ...

  7. 远程连接mysql 1130错误解决方法

  8. 聊聊从web session的共享到可扩展缓存设计

    先从web session的共享说起   许多系统需要提供7*24小时服务,这类系统肯定需要考虑灾备问题,单台服务器如果宕机可能无法立马恢复使用,这必定影响到服务.这个问题对于系统规模来说,从小到大可 ...

  9. Akka.NET v1.0 已发布,支持Mono

    Akka.NET 是Java/Scala 流行框架Akka的一个 .NET 开源移植.可用于构建高并发,分布式和容错事件驱动的应用在 .NET 和 Mono 平台之上.Akka.NET 经过一年多的努 ...

  10. To Java程序员:切勿用普通for循环遍历LinkedList

    ArrayList与LinkedList的普通for循环遍历 对于大部分Java程序员朋友们来说,可能平时使用得最多的List就是ArrayList,对于ArrayList的遍历,一般用如下写法: p ...