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

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

1.使用http模塊處理（http模塊時nodejs內置模塊）

public文件夾下的文件js,html默認為靜態資源，后台讀取這些文件然后返回給前台。

var http = require('http');
var fs = require('fs')
const path = require('path'); 
const server = http.createServer((req,res)=>{
    res.statusCode=200;
    var pathurl=path.join(__dirname, req.url);
    var parseurl= path.parse(pathurl);
    var spliturls=path.normalize( req.url).split(path.sep)
    var html="";
    if(spliturls.length>0&&spliturls[1]=='public'){
        if(parseurl.ext=='.js'){
            res.setHeader('Content-Type','text/plain');
            html= fs.readFileSync(path.join(__dirname, req.url));
        }else if(parseurl.ext=='.html'){
            res.setHeader('Content-Type','text/html');
            html= fs.readFileSync(path.join(__dirname, req.url));
        }
    }else{
        res.setHeader('Content-Type','text/html');
        html= fs.readFileSync(path.join(__dirname, 'src/index.html'));
    }
  res.end(html)
})
server.listen('3000','127.0.0.1',()=>{
    console.log(`服務器運行在 http://127.0.0.1:3000/`);
})

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

var express = require("express");
var app = new  express();
const path = require('path');
app.use(express.static(path.join(__dirname,'public')))
app.use('/',function(req,res){
    res.setHeader('Content-Type','text/html');
    var html= fs.readFileSync(path.join(__dirname, 'src/index.html'));
    res.end(html)
})
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中的 

function serveStatic (root, options) {
  if (!root) {
    throw new TypeError('root path required')
  }

  if (typeof root !== 'string') {
    throw new TypeError('root path must be a string')
  }

  ......此處省略部分代碼.....
  .......
  // construct directory listener
  var onDirectory = redirect
    ? createRedirectDirectoryListener()
    : createNotFoundDirectoryListener()

  return function serveStatic (req, res, next) {
    if (req.method !== 'GET' && req.method !== 'HEAD') {
      if (fallthrough) {
        return next()
      }

      // method not allowed
      res.statusCode = 405
      res.setHeader('Allow', 'GET, HEAD')
      res.setHeader('Content-Length', '0')
      res.end()
      return
    }

    var forwardError = !fallthrough
    var originalUrl = parseUrl.original(req)
    var path = parseUrl(req).pathname

    // make sure redirect occurs at mount
    if (path === '/' && originalUrl.pathname.substr(-1) !== '/') {
      path = ''
    }

    // create send stream
    var stream = send(req, path, opts)

   ......此處省略部分代碼......
    ...........

    // pipe
    stream.pipe(res)
  }
}

 

調用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輸出文件時，文件路徑的生成。