报错: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 文件了 。
- 下载,安装 node.js
从 https://nodejs.org 下载安装 node.js, 分为 Mac OS 、 Windows、Linux 版本。
- 通过 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站点。
打开浏览器,在地址栏中输入:
如果要访问 index.html 文件, 只需:
小结
解决 ajax 的跨域访问,一直是Web 开发的一个难题。如果去网上搜索解决方案的化,你会感觉难度非常之大。 殊不知,通过安装一个小小的 node.js , 这个看似复杂的难题,瞬间解决!
本文参考书: 《 全栈开发之道:MongoDB+Express+AngularJS+Node.js 》
更多全栈技术,请关注微信公众号: “全栈工程师的早读课”,每天早8:00 准时推送技术文章。
</div>
</div>
</div>