nodejs構建本地web測試服務器如何解決訪問靜態資源問題

2019-11-19 16:04:57

字體：大中小

來源：轉載

供稿：網友

直接打開html文件，是以file:///方式打開的，這種方式很多時候會遇到跨域的問題，因此我們一般會搭建一個簡易的本地服務器，來運行測試頁面。

一、構建靜態服務器

1、使用express模塊

建立個js文件，命名server，內容代碼如下：

var express = require('express');var app = express();var path = require('path');//指定靜態資源訪問目錄app.use(express.static(require('path').join(__dirname, 'public')));// app.use(express.static(require('path').join(__dirname, 'views'))); 如果有文件夾存放資源，出現報錯的話，那就多use幾次就可以了// 設定views變量，意為視圖存放的目錄app.set('views', (__dirname + "/public"));// app.set('views', __dirname);// 修改模板文件的后綴名為htmlapp.set( 'view engine', 'html' );// 運行ejs模塊app.engine( '.html', require( 'ejs' ).__express );app.get("/", function(req, res) {  res.render('index');});var server = app.listen(1336, "127.0.0.1",function(){  var host = server.address().address;  var port = server.address().port;  console.log("Server running at http://%s:%s", host, port)});

文件結構如下：

運行的話只要執行：node server.js 就可以了

然后在瀏覽器輸入http://127.0.0.1:1336/ 來訪問項目文件夾內的文件了

2、使用connect模塊

建立個js文件，命名 server2 ，內容代碼如下：

 var connect = require("connect"); var serveStatic = require("serve-static"); var app = connect(); // app.use(serveStatic("C://xxx//xxx//xxx//項目文件夾")); app.use(serveStatic("public")); app.listen(1337); console.log('Server running at http://127.0.0.1:1337/');

運行的話只要執行：node server2.js 就可以了，

然后在瀏覽器輸入http://127.0.0.1:1337/ 來訪問項目文件夾內的文件了。（如果是index.html文件可以省略不寫，默認加載的就是這個文件）；

3、使用http模塊

建立個js文件，命名 server3 ，內容代碼如下：

var finalhandler = require('finalhandler')var http = require('http')var serveStatic = require('serve-static')// Serve up public/ftp foldervar serve = serveStatic('public', {'index': ['index.html', 'index.htm']})// Create servervar server = http.createServer(function onRequest (req, res) {  serve(req, res, finalhandler(req, res))})// Listenserver.listen(1338);console.log('Server running at http://127.0.0.1:1338/');

運行的話只要執行：node server3.js 就可以了，

然后在瀏覽器輸入http://127.0.0.1:1338/ 來訪問項目文件夾內的文件了。

注：總的文件目錄如下：