Question

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

节点 app.js 正在网络根目录中运行：

https://<account_name>.blob.core.windows.net/<container_name>/<blob_name>

appmain.html 页面位于同一个网络根目录中：

'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')});

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

相反，如果我尝试使用URL node_modules/materialize-css/dist/js/materialize.min.js，页面将按预期加载（我的意思是：使用正确的资源和CSS）。

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

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

app2.js ＆＃39;使用严格的＆＃39;;

http://localhost/appmain.html

app2main.html

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')});

访问网址<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>时，“Hello World！＆＃39;消息出现，但我收到以下错误（通过检查页面visibile）：

http://localhost:8888

相反，我在访问网址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)

时没有收到错误（以及预期的格式）

Answer 1

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

e.g。 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网络服务器在{{1}中提供类似于express.static的静态文件}}。这就是为什么 http://localhost/node_modules/jquery/dist/jquery.min.js正在发挥作用。

希望它能清除你的怀疑。

Localhost测试：无法使用http：// localhost：8888获取资源

1 个答案: