nodejs請求靜態資源404錯誤，後台需處理返回http請求的靜態資源

標籤：pat   設定   ret   orm   exp   stat   檔案路徑   名稱   404錯誤   

nodejs小白在做的demo時後台返回首頁面html後，頁面請求引用的js檔案，後台沒有返回對應請求路徑的靜態資源，所以報錯。原來在java開發下沒有注意過這種問題，一般除了WEB-INF下的檔案不能訪問外，其他資源檔都可以直接用http路徑訪問。

1.使用http模組處理（http模組時nodejs內建模組）

public檔案夾下的檔案js,html預設為靜態資源，後台讀取這些檔案然後返回給前台。

 1 var http = require(‘http‘); 2 var fs = require(‘fs‘) 3 const path = require(‘path‘);  4 const server = http.createServer((req,res)=>{ 5     res.statusCode=200; 6     var pathurl=path.join(__dirname, req.url); 7     var parseurl= path.parse(pathurl); 8     var spliturls=path.normalize( req.url).split(path.sep) 9     var html="";10     if(spliturls.length>0&&spliturls[1]==‘public‘){11         if(parseurl.ext==‘.js‘){12             res.setHeader(‘Content-Type‘,‘text/plain‘);13             html= fs.readFileSync(path.join(__dirname, req.url));14         }else if(parseurl.ext==‘.html‘){15             res.setHeader(‘Content-Type‘,‘text/html‘);16             html= fs.readFileSync(path.join(__dirname, req.url));17         }18     }else{19         res.setHeader(‘Content-Type‘,‘text/html‘);20         html= fs.readFileSync(path.join(__dirname, ‘src/index.html‘));21     }22   res.end(html)23 })24 server.listen(‘3000‘,‘127.0.0.1‘,()=>{25     console.log(`伺服器運行在 http://127.0.0.1:3000/`);26 })

2.使用express模組（nodejs的一個web架構，封裝了http模組）

 1 var express = require("express"); 2 var app = new  express(); 3 const path = require(‘path‘); 4 app.use(express.static(path.join(__dirname,‘public‘))) 5 app.use(‘/‘,function(req,res){ 6     res.setHeader(‘Content-Type‘,‘text/html‘); 7     var html= fs.readFileSync(path.join(__dirname, ‘src/index.html‘)); 8     res.end(html) 9 })10 app.listen(‘3000‘,‘127.0.0.1‘)

其中express.static是設定靜態資源的目錄，如果請求這個目錄下的檔案，則會返回對應檔案。這裡需要注意的是前台請求的檔案路徑如果是相對路徑，則從public下面的檔案開始，不包括public，否則取不到檔案，然後又執行下面的use，返回的資料就不對了。

　　測試專案的實際靜態資源的路徑： E:\mywv\testbb\public，其中testbb是項目名稱，因此如果請求E:\mywv\testbb\public\index.js檔案的http請求路徑是http://127.0.0.1:3000/index.js,而不是http://127.0.0.1:3000/public/index.js。

原因：

express.static(path.join(__dirname,‘public‘))調用的是　serve-static/index.js中的 

 1 function serveStatic (root, options) { 2   if (!root) { 3     throw new TypeError(‘root path required‘) 4   } 5  6   if (typeof root !== ‘string‘) { 7     throw new TypeError(‘root path must be a string‘) 8   } 9 10   ......此處省略部分代碼.....11   .......12   // construct directory listener13   var onDirectory = redirect14     ? createRedirectDirectoryListener()15     : createNotFoundDirectoryListener()16 17   return function serveStatic (req, res, next) {18     if (req.method !== ‘GET‘ && req.method !== ‘HEAD‘) {19       if (fallthrough) {20         return next()21       }22 23       // method not allowed24       res.statusCode = 40525       res.setHeader(‘Allow‘, ‘GET, HEAD‘)26       res.setHeader(‘Content-Length‘, ‘0‘)27       res.end()28       return29     }30 31     var forwardError = !fallthrough32     var originalUrl = parseUrl.original(req)33     var path = parseUrl(req).pathname34 35     // make sure redirect occurs at mount36     if (path === ‘/‘ && originalUrl.pathname.substr(-1) !== ‘/‘) {37       path = ‘‘38     }39 40     // create send stream41     var stream = send(req, path, opts)42 43    ......此處省略部分代碼......44     ...........45 46     // pipe47     stream.pipe(res)48   }49 }

 

調用express.static時，使用的serveStatic (root, options)函數，參數root為E:\mywv\testbb\public,建立發送流（send(req, path, opts)），然後在傳送檔案時stream.pipe(res).當前端請求路徑是
http://127.0.0.1:3000/public/index.js檔案時，pipe輸出檔案使用的檔案路徑產生是有誤的導致檔案找不到。
是stream.pipe輸出檔案時，檔案路徑的產生。

 

nodejs請求靜態資源404錯誤，後台需處理返回http請求的靜態資源