ajax请求——chrome浏览器打开本地文件报错

报错：Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

背景

运行一个html 文件， 报错如下：

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

原因何在？ 这是因为ajax 跨域访问造成的。 那么，如何解决呢？

跨域解决方法

通过安装 node.js ，搭建一个简单的本地的 http web server。 在终端窗口的命令行中，执行 http-server 指令。 这样以来，就不必再创建server.js 文件了 。

1. 下载，安装 node.js

从 https://nodejs.org 下载安装 node.js， 分为 Mac OS 、 Windows、Linux 版本。

2. 通过 npm 指令，安装 http-server 模块（module）
   采用全局安装方式， 在终端窗口，执行命令：

npm install -g http-server

3, 启动 Web Server

通过命令行，进入到工程所在的路径:

cd \projects\angular-registration-login-example

通过以下指令启动 web server:

http-server

此时，在终端窗口，出现以下提示：

`C:\projects\angular-registration-login-example>http-server`
`Starting up http-server, serving ./`
`Available on:`
`[http://192.168.0.5:8080](http://192.168.0.5:8080/)`
`[http://127.0.0.1:8080](http://127.0.0.1:8080/)`
`Hit CTRL-C to stop the server`

访问本地web 站点

在 web server 启动后，可通过浏览器访问本地web站点。
打开浏览器，在地址栏中输入：

http://localhost:8080

如果要访问 index.html 文件， 只需：

http://localhost:8080/index.html

小结

解决 ajax 的跨域访问，一直是Web 开发的一个难题。如果去网上搜索解决方案的化，你会感觉难度非常之大。 殊不知，通过安装一个小小的 node.js ， 这个看似复杂的难题，瞬间解决！

---

本文参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》

---

更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。

      </div>
    </div>
</div>