为什么我不能直接加载mydomain.com/public url？

Question

注意：我添加了apache和spring标签，因为用户在下面评论说他认为这是一个apache和spring问题。

我正在通过阅读教程和试验示例应用来学习AngularJS。下面的代码允许用户输入mydomain.com然后单击公共链接而不进行身份验证。但是，无论何时，我直接在浏览器中输入mydomain.com/public1，浏览器都会响应一个弹出窗口，请求用户名和密码在服务器上进行解释。 AngularJS应用程序决定强制对服务器进行身份验证调用，而不是让未经身份验证的用户查看公共路由。这显然是不可接受的行为。 如何修复以下代码，以便通过在浏览器中输入网址直接访问mydomain.com/public1（或任何公共网址）？

以下是hello.js中的路由提供商：

angular
    .module('hello', [ 'ngRoute', 'auth', 'home', 'message', 'public1', 'navigation' ])
    .config(

            function($routeProvider, $httpProvider, $locationProvider) {

                $locationProvider.html5Mode(true);

                $routeProvider.when('/', {
                    templateUrl : 'js/home/home.html',
                    controller : 'home'
                }).when('/message', {
                    templateUrl : 'js/message/message.html',
                    controller : 'message'
                }).when('/public1', {
                    templateUrl : 'js/public1/public1.html',
                    controller : 'public1'
                }).when('/public2', {
                    templateUrl : 'js/public1/public2.html',
                    controller : 'public1'
                }).when('/public3', {
                    templateUrl : 'js/public1/public3.html',
                    controller : 'public1'
                }).when('/public4', {
                    templateUrl : 'js/public1/public4.html',
                    controller : 'public1'
                }).when('/login', {
                    templateUrl : 'js/navigation/login.html',
                    controller : 'navigation'
                }).otherwise('/');

                $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

            }).run(function(auth) {

        // Initialize auth module with the home page and login/logout path
        // respectively
        auth.init('/login', '/logout');

    });

以下是注入上述路由提供程序的auth.js模块：

angular.module('auth', []).factory(
    'auth',

    function($rootScope, $http, $location) {

        var auth = {

            authenticated : false,
            authenticatedPin : false,

            loginPath : '/login',
            logoutPath : '/logout',
            homePath : '/checkpin',
            path : $location.path(),

            authenticate : function(credentials, callback) {

                var headers = credentials && credentials.username ? {
                    authorization : "Basic " + btoa(credentials.username + ":" + credentials.password)
                } : {};

                $http.get('user', {
                    headers : headers
                }).success(function(data) {
                    if (data.name) { auth.authenticated = true; } 
                    else { auth.authenticated = false; }
                    callback && callback(auth.authenticated);
                    $location.path('/message');
                }).error(function() {
                    auth.authenticated = false;
                    callback && callback(false);
                });

            },

            clear : function() {
                $location.path(auth.loginPath);
                auth.authenticated = false;
                $http.post(auth.logoutPath, {}).success(function() {
                    console.log("Logout succeeded");
                }).error(function(data) {
                    console.log("Logout failed");
                });
            },

            init : function(homePath, loginPath, logoutPath) {

                auth.homePath = homePath;
                auth.loginPath = loginPath;
                auth.logoutPath = logoutPath;

                auth.authenticate({}, function(authenticated) {
                    if (authenticated) {
                        $location.path(auth.path);
                    }
                })

            }

        };

        return auth;

    });

以下是navigation.js，它调用auth模块：

angular.module('navigation', ['ngRoute', 'auth']).controller(
    'navigation',

    function($scope, $route, auth) {

        $scope.credentials = {};

        $scope.tab = function(route) {
            return $route.current && route === $route.current.controller;
        };

        $scope.authenticated = function() {
            return auth.authenticated;
        }

        $scope.login = function() {
            auth.authenticate($scope.credentials, function(authenticated) {
                if (authenticated) {
                    console.log("Login succeeded")
                    $scope.error = false;
                } else {
                    console.log("Login failed")
                    $scope.error = true;
                }
            })
        }

        $scope.logout = auth.clear;

    });

index.html是：

<!doctype html>
<html>
<head>
<title>Hello Angular</title>
<base href="/" />
<link href="css/angular-bootstrap.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}ownChair31#
</style>
</head>

<body ng-app="hello" ng-cloak class="ng-cloak">
<div ng-controller="navigation" class="container">
    <ul class="nav nav-pills" role="tablist">
        <li ng-class="{active:tab('home')}"><a href="/">home</a></li>
        <li ng-class="{active:tab('message')}"><a href="/message">message</a></li>
        <li ng-class="{active:tab('public1')}"><a href="/public1">public1</a></li>
        <li ng-class="{active:tab('public2')}"><a href="/public2">public2</a></li>
        <li ng-class="{active:tab('public3')}"><a href="/public3">public3</a></li>
        <li ng-class="{active:tab('public4')}"><a href="/public4">public4</a></li>
        <li><a href="/login">login</a></li>
        <li ng-show="authenticated()"><a href="" ng-click="logout()">logout</a></li>
    </ul>
</div>
<div ng-view class="container"></div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/auth/auth.js" type="text/javascript"></script>
<script src="js/home/home.js" type="text/javascript"></script>
<script src="js/message/message.js" type="text/javascript"></script>
<script src="js/public1/public1.js" type="text/javascript"></script>
<script src="js/navigation/navigation.js" type="text/javascript"></script>
<script src="js/hello.js" type="text/javascript"></script>
</body>
</html>

此外，该应用程序在Apache http上运行，它调用一个具有自己的内部tomcat实例的spring启动应用程序。 Apache的VirtualHost代码是：

<VirtualHost www.mydomain.com:80>
    ServerName www.mydomain.com
    ServerAlias mydomain.com
    ProxyRequests Off
    ProxyPass / http://localhost:9000/
    ProxyPassReverse / http://localhost:9000/
</VirtualHost>

如果您对此示例应用的来源感兴趣，以下链接包含起点的完整代码：https://spring.io/guides/tutorials/spring-security-and-angular-js/

请注意，已对链接中的代码进行了更改。