配置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 // 端口号
} 

当然其他编辑器也有类似的插件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 如何解决ajax在google chrome浏览器上失效

    问题分析:我的ajax的代码在IE浏览器,360的IE核心的浏览器,以及在火狐都是运行正常的,但是在GOOGLE CHROME下却让我非常头疼,总是没有显示正确结果. 我本机的开发环境如下: google chrome 版本 28.0.1469.0m 服务器Tomcat6.0 服务器端Spring MVC 的代码如下: 控制器部分: @RequestMapping(value="/searchRecordBlackListByCardId.json") public String se

  • 配置Chrome支持本地(file协议)的AJAX请求

    什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: •新建文件夹  •新建需要的文件  •在Sublime(或其他编辑器)中完成DEMO的编码  •双击HTML文件,直接在浏览器中运行演示 如果此时Demo中有AJAX操作,浏览器就会报一个错: XMLHttpRequest cannot load file:///Users/iceStone/Documents/Learning/angular/demo/angular-moviec

  • selenium+python配置chrome浏览器的选项的实现

    1. 背景 在使用selenium浏览器渲染技术,爬取网站信息时,默认情况下就是一个普通的纯净的chrome浏览器,而我们平时在使用浏览器时,经常就添加一些插件,扩展,代理之类的应用.相对应的,当我们用chrome浏览器爬取网站时,可能需要对这个chrome做一些特殊的配置,以满足爬虫的行为. 常用的行为有: 禁止图片和视频的加载:提升网页加载速度. 添加代理:用于翻墙访问某些页面,或者应对IP访问频率限制的反爬技术. 使用移动头:访问移动端的站点,一般这种站点的反爬技术比较薄弱. 添加扩展:像

  • File, FileReader 和 Ajax 文件上传实例分析(php)

    File FileReader 可以干什么? Ajax文件上传例子 FileReader 对象可以读取文件的 Base64编码数据(readAsDataURL),2进制字符串(readAsBinaryString),文本(readAsText)并且都是异步的. 对了,Email拖拽附件上传就可以利用 FileReader 配合 Ajax 完成. File 对象 File对象可以从 input[type=file].files 数组,和拖拽事件 event.dataTransfer.files 中

  • SpringBoot快速集成jxls-poi(自定义模板,支持本地文件导出,在线文件导出)

    在项目持续集成的过程中,有时候需要实现报表导出和文档导出,类似于excel中这种文档的导出,在要求不高的情况下,有人可能会考虑直接导出csv文件来简化导出过程.但是导出xlsx文件,其实过程相对更复杂.解决方案就是使用poi的jar包.使用源生的poi来操作表格,代码冗余,处理复杂,同时poi的相关联的依赖还会存在版本兼容问题.所以直接使用poi来实现表格导出,维护成本大,不易于拓展. 我们需要学会站在巨人的肩膀上解决问题,jxls-poi这个就很好解决这个excel表格导出的多样化的问题.类似

  • jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法

    效果: json文件: { "books":[ {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"论语","publish":"人民文学出版社","num":"303","desc":

  • Nginx中404页面的配置及AJAX请求返回404页面的方法

    404页面基础配置 404错误是WWW网站访问容易出现的错误.最常见的出错提示:404 NOT FOUND.404错误页的设置对网站SEO有很大的影响,而设置不当,比如直接转跳主页等,会被搜索引擎降权拔毛.404页面的目的应该是告诉用户:你所请求的页面是不存在的,同时引导用户浏览网站其他页面而不是关掉窗口离去.搜索引擎通过HTTP状态码来识别网页的状态.当搜索引擎获得了一个错误链接时,网站应该返回404状态码,告诉搜索引擎放弃对该链接的索引.而如果返回200或302状态码,搜索引擎就会为该链接建

  • Vue-cli配置打包文件本地使用的教程图解

    最近做的一个嵌入app的pc端项目,用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件,打包后的index.html加载文件如图: url中的路径据我们所知,最前面为一个反斜杠(/XX),表示从网站根目录开始搜索文件,如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头,看来是打包后的文件路径有问题 于是就去找webpack.base.conf.js文件,有个output选项,output是webpack中对输出文件的配置,最常用

  • 通过jquery的ajax请求本地的json文件方法

    自己学习jquery的ajax的经历,记录一下 ajaxTestDemo.html 在body里面放一个id为test的div <div id="test"></div> 第一步还是要先加载jquery文件 jquery.min.js <script> $(function(){ $.ajax({ //请求方式为get type:"GET", //json文件位置 url:"./data/shuju.json"

  • Mac环境Nginx配置和访问本地静态资源的实现

    本地开发有时候需要调试静态文件资源,无法直接访问,可以通过配置本地Nginx服务的方式来进行,顺便记录一下Nginx的配置步骤 安装 <!--通过 Brew 安装: --> brew install nginx <!--启动: --> brew services start nginx <!--查看配置: --> cat usr/local/etc/nginx/nginx.conf <!--编辑配置: --> vi usr/local/etc/nginx/n

  • Nginx如何安装配置Lua支持

    目录 Nginx安装配置Lua支持 Nginx中配置lua脚本,访问url总是提示404 总结 Nginx安装配置Lua支持 默认情况下Nginx不支持Lua模块,需要安装LuaJIT解释器,并且重新编译Nginx,或者可使用国人开发的openrestry 需要的模块:LuaJIT,Ngx_devel和lua-nginx-module Luajit官网:https://luajit.org 1. 环境准备 [root@nginx_lua ~]# yum install -y gcc gcc-c+

随机推荐