本地主机测试：无法使用 http://localhost:8888 获取资源答案

【问题标题】：Localhost test: can't get resource using http://localhost:8888本地主机测试：无法使用 http://localhost:8888 获取资源
【发布时间】：2016-12-22 02:15:29
【问题描述】：

出于测试目的，我运行 Apache 本地 Web 服务器，并设置了一个侦听端口 8888 的 node.js 应用程序作为图像预处理器，但不幸的是，我遇到了如下所述的问题。

节点app.js在web根目录下运行：

'use strict';

let express= require('express')
    ,multer = require('multer')
    ,upload = multer()
    ,app = express()    

    //Import imgProcessor module which we would implement later
    ,imgProc = require('./imgProcessor');

app.get ('/', (req, res, next)=>{
        res.sendFile(__dirname+'/appmain.html');
        });

app.post('/uploadImg', upload.array('pics'), 
        (req, res, next)=>{
            //Call the convertImgs method and pass the image files as its argument
            imgProc.convertImgs(req.files).then(
                (imageStringArray)=>{
                    //After all image processing finished, send the base64 image string to client
                    res.json(imageStringArray)})});

app.listen(8888, ()=>{
    console.log('Hosted on Port 8888')});

appmain.html 页面位于相同的 Web 根目录中：

<html>
<head>
    <title>Upload Image Demo</title>
    <link rel="shortcut icon" href="">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>

    <link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
</head>

<body class="container">

    <div class="row">
        <form id="form1" class="col m4 offset-m4" action="/uploadImg" enctype="multipart/form-data" method="post">
            <div class="file-field input-field">
                <div class="btn">
                    <span>File</span>
                    <input type="file" multiple="" accept="image/jpeg,png" name="pics">
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
            <div class="input-field">
                <button type="submit" class="waves-effect waves-light btn">Submit</button>
            </div>
            <div class="progress" style="display:none">
                <div class="indeterminate"></div>
            </div>
        </form>
    </div>

    <div class="row img-preview"></div>

    <script>
        $(function(){
            $('#form1').on('submit', function(event){
                    event.preventDefault();

                    var data = new FormData(this);
                    $.each(
                        $('input[name="pics"]')[0].files, 
                            function(i, file){
                                data.append('file-'+i, file);
                            });

                    $('.progress').css({
                            display:'block'
                        });

                    $.ajax({
                            type:'POST',
                            url: $(this).attr('action'),
                            data:data,
                            cache:false,
                            contentType: false,
                            processData: false,
                            success:function(data){
                                for(var i=0;i<data.length;i++){
                                    var template =
                                        '<div class="col m4">
                                         <div class="card">
                                         <div class="card-image">
                                         <img src="'
                                        + data[i] 
                                        + '"></div></div></div>';

                                        $('.img-preview').append(template);
                                }

                                $('.progress').css({
                                    display:'none'
                                });
                            },
                            error: function(err){
                                $('.progress').css({
                                    display:'none'
                                });
                            }
                        });
            })
        })
    </script>
</body>
</html>

当我在浏览器中使用 URL http://localhost:8888 时，会加载 html 页面（即我可以看到表单的按钮和输入字段）但在 <script> 中请求的资源（例如：node_modules/jquery/dist/jquery.min.js 或node_modules/materialize-css/dist/js/materialize.min.js) 未加载。同样地，页面无法从未加载的 CSS 样式表中受益。

相反，如果我尝试使用 URL http://localhost/appmain.html，页面会按预期加载（我的意思是：使用正确的资源和 CSS）。

在处理 URL 中的端口号时，我的 Apache Web 服务器似乎无法提供资源。我该如何解决这个问题？

编辑只是为了简化：假设节点 app2.js 正在侦听端口 8888，它只有一个方法（get）向客户端发送“Hello World！” app2main.html 页面。没有可提供的文件。 app2main.html 页面只需要加载几个 Javascript 脚本和一个 CSS 样式表。

app2.js '使用严格';

let express= require('express')
    ,app = express();


app.get ('/', (req, res, next)=>{
            res.sendFile(__dirname+'/app2main.html');
            });

app.listen(8888, ()=>{
    console.log('Hosted on Port 8888')});

app2main.html

<html>
<head>
    <title>Upload Image Demo</title>
    <link rel="shortcut icon" href="">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script 
     src="node_modules/materialize-css/dist/js/materialize.min.js"></script>

    <link rel="stylesheet" 
     href="node_modules/materialize-css/dist/css/materialize.min.css">
</head>

    <body class="container">
        <h2> Hello World! </h2>
    </body>
</html>

当访问 URL http://localhost:8888 时，“Hello World!”出现消息，但我收到以下错误（通过检查页面可见）：

http://localhost:8888/node_modules/jquery/dist/jquery.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8888/node_modules/materialize-css/dist/js/materialize.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8888/node_modules/materialize-css/dist/css/materialize.min.css Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8888/node_modules/materialize-css/dist/css/materialize.min.css Failed to load resource: the server responded with a status of 404 (Not Found)

当访问 URL http://localhost/app2main.html 时，我没有收到任何错误（以及预期的样式）

【问题讨论】：

您不能提供来自任何旧 Web 应用程序中的随机文件 - 您需要实际配置它以提供静态文件。不过，我个人不会从您的节点模块中为它们提供服务，为什么不构建一个应用程序包？
在appmain.html中使用相对路径而不是绝对路径
@DaveNewton 感谢您的回复，请原谅我的错误解释，但我的问题是为什么我收到与脚本源的 GET 相关的 404 错误只有使用端口号时。请参阅编辑示例。
@MukeshSharma 我尝试使用绝对路径，结果相同。我不知道为什么只有在 URL 中使用端口号时才会出现错误。
我遇到了你的问题。你必须使用express.static。只需分享您应用的目录结构即可。

标签： node.js apache port

【解决方案1】：

如 cmets 中所述，您应该使用 express.static 在 node.js 应用程序中提供静态内容。在您的情况下，您的静态内容位于 node_modules 目录本身。你可以试试下面的代码来加载所有资源，

例如http://localhost:8888/node_modules/jquery/dist/jquery.min.js

app.use('/node_modules', express.static('node_modules'));

另外，您提到当您访问http://localhost/app2main.html 时，它在没有express.static 的情况下工作，因为apache Web 服务器提供类似于express.static 在node.js 中的静态文件。这就是为什么 http://localhost/node_modules/jquery/dist/jquery.min.js 正在工作。

希望它能消除你的疑虑。

【讨论】：