报错: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 版本。

  1. 通过 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 准时推送技术文章。

你可能感兴趣的:(报错:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.)