学习angular路由,直接从本地打开index.html的一个跨域BUG

日期:

2018.05.10

问题:

先看一下写的demo

index.html文件

<!DOCTYPE html>
<html lang="en" ng-app="routeApp">
<head>
    <meta charset="UTF-8">
    <title>task</title>
</head>
<body>
<div ng-view="view"></div>

<script src="angular.min.js"></script>                   
<script src="angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js启动模块

angular.module('routeApp', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'login1.html'
            })
            .when('/test', {
                templateUrl: 'test.html'
            })
            .otherwise({redirectTo: '/'});
    }]);

这个问题不是我遇到的,是一位angular初学者,使用的是vs code编辑器(我用的是webstorm).起因是因为说遇到一个BUG,按照菜鸟教程写的demo一直报错:

angular.min.js:108 Failed to load file:///C:/CSS/task/JS/demo/111.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

原因:

直接从文件夹里打开index.html文件会涉及到同源策略,导致跨域报错.虽然文件的地址是一样的,都是指向同一个文件夹,但是它的域名和协议,端口是不同的,就像localhost和127.0.0.1虽然都是指向本机,但是也属于跨域一样,导致报错.

怎么发现的:

自己也写了个差不多的demo发现可以正常运行,但是在对方电脑上就报错,仔细检查还是感觉路径有问题,通过webstorm打开的html文件路径不是电脑上文件夹的路径,而是webstorm本身的一个域名:localhost:63342,所以不会有跨域的问题,但是vs code没有这个功能,只能手动找到本地的文件直接打开,在本地配置了nginx反向代理后也是可以正常运行的,所以可以确定是这个问题.

修复:

在对方电脑上配置nginx反向代理,可以正常访问.

在哪些文件修改了:

代码本身没有问题,不需要修改,只是配置了下nginx.

我导致的:(是or否)

否

解决Bug的时间:

1.5小时

教训:

这次的BUG不应该用这么长的时间的,从一开始的报错就应该想到是路径有问题,但是因为其中一个login.html发起了跨域POST请求,导致我的思路被带歪了,而且运行环境也不一致,我是直接用webstorm打开的,而vs code没有这个功能,只能打开本地的文件,但是我没有发现这个问题,导致耽误了这么长的时间,以后复现BUG的时候一定要尽量保证运行环境的一致.

学习angular路由,直接从本地打开index.html的一个跨域BUG

猜你喜欢