当我通过 Node.js 中的“http”服务器提供脚本时，我的 html 页面中的脚本不起作用答案

【问题标题】：Script in my html page not working when i serve it through the 'http' server in Node.js当我通过 Node.js 中的“http”服务器提供脚本时，我的 html 页面中的脚本不起作用
【发布时间】：2018-01-25 04:53:32
【问题描述】：

我正在“http”服务器中处理我的“/”路由，并以这种方式提供 index.html 文件-

if(parsedUrl.pathname === '/') {
            fs.readFile('./index.html', 'utf-8', function(err, fileResponse){
                if(err){
                    console.log('Error');
                    res.writeHeader(404, {"Content-Type":"text/html"});
                    res.write('There was an error!');
                } else {
                    console.log('No error');
                    res.writeHeader(200, {"Content-Type": "text/html"});
                    res.write(fileResponse);
                }
                res.end();
            });

            //fs.createReadStream(__dirname + '/index.html').pipe(res);
            break;
        }

这是我的 index.html -

<!DOCTYPE html>
<html>
<head>
    <title>File Explorer</title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>

</head>

<script>
    alert('hello');
    var fileExplorerApp = angular.module('explorerApp', []);
    fileExplorerApp.controller("MyController", function ($scope, $http) {
        console.log('Angular working 1');

        var currentPath = '';
        $scope.reload = function (newPath, back) {
            if (back) {
                currentPath = newPath;
            } else {
                if (currentPath === '') {
                    currentPath = newPath;
                } else {
                    currentPath = currentPath + '/' + newPath;
                }
            }
            console.log('Newpath- ' + currentPath);

            $http({method: 'GET', url: 'http://localhost:3000/list_dir?path=' + currentPath})
                    .success(function(response){
                        console.log('Angular working 2');
                        $scope.filesAndFolders = response.data;
                        $scope.currentPath = currentPath;
                    }, function(error) {
                        console.log('Error in $http- '+error);
                    });

        }

        $scope.back = function () {
            var prevPath = currentPath.substring(0, currentPath.lastIndexOf('/'));
            console.log('Path after substring- ' + prevPath);
            console.log('Prevpath when back clicked- ' + prevPath);
            $scope.reload(prevPath, true);

        }

        $scope.reload('F:/', false);
    });
</script>

<body ng-app="explorerApp" ng-controller="MyController">

<div class="ui container">
    <h1 id="currentPath">Current Directory- {{ currentPath }}</h1>
    <button ng-if="currentPath !== 'F:/'"
            ng-click="back()"
            class="ui left labeled icon button">
        <i class="left arrow icon"></i>
        Back
    </button>
    <div class="ui list">
        <a class="item"
           ng-repeat="item in filesAndFolders"
           ng-click="reload(item.name, false)"
           ng-href="{{item.type === 'file' ? '/get_file?path='+currentPath+'/'+item.name : ''}}">
            <i ng-if="item.type === 'folder'" class="folder icon"></i>
            <i ng-if="item.type === 'file'" class="file icon"></i>
            {{ item.name }}</a>
    </div>
</div>
</body>
</html>

但是，此代码存在一些问题。该脚本无法以某种方式执行。请告诉我这段代码有什么问题？

PS：我知道我可以使用 Express 使这更容易，但这实际上是给我的任务，并且提到我必须使用节点提供的“http”模块来处理路由，而不是使用任何其他框架的 Express就此而言。

【问题讨论】：

哪些消息会打印到您的服务器控制台？哪些消息会打印到您的浏览器控制台？
您的脚本有可能在加载外部脚本之前开始执行。我会将整个脚本内容放入作为load 事件处理程序添加的函数中：window.addEventListener('load', function() { // your script here } );
没有打印出来。在我的服务器控制台和浏览器控制台中都没有。我认为@WiktorZychla 是对的。让我试试他的方法。
$http(..) 函数返回没有成功方法的承诺。应该是$http(..).then(...)docs.angularjs.org/api/ng/service/$http#general-usage
我把它改成了$http.get('http://localhost:3000/list_dir?path=' + currentPath) .then(function (response) { console.log('Angular working 2'+ response); $scope.filesAndFolders = response.data; $scope.currentPath = currentPath; }, function (error) { console.log('Error in $http- ' + error); });window.addEventListener.. 也不行。

标签： javascript angularjs node.js http

【解决方案1】：

1.6 版本的 Angular 中没有 success。我改为 then 和 catch 语法。

  $http({method: 'GET', url: 'http://localhost/list_dir?path=' + currentPath})
    .then(function (response) {
        console.log('Angular working 2');
        $scope.filesAndFolders = response.data;
        $scope.currentPath = currentPath;
    }).catch(function (error) {
      console.log('Error in $http- ' + error);
    });

您可能面临的另一个问题是 CORS，但我看不到您的完整代码。

【讨论】：