Quick Host Static Web on Node.JS


介紹如何使用NodeJS的套件幫我們快速建立靜態網頁的Hosting服務,解決 Cross-Origin Resource Sharing (CORS) 問題

在本機開發靜態網頁時,常常會遇到本機 Cross-Origin Resource Sharing (CORS) 的問題,而這也讓我們時常需要額外起一個Web Hosting服務如Apach, IIS 或是NodeJS來幫我們將服務請求才可以達到簡單的跨網域的請求開發.而今天要分享如何在3分鐘內透過 NodeJS + node-static 這個套件將一個靜態網站服務建立.

What is Cross-Origin Resource Sharing (CORS)

跨網站(HTTP)請求是指發出請求所在網域不同於請求所指向之網域的 HTTP 請求,例如網域 A(http://domain-a.com)的網頁載入一個 中的 src 屬性內的資料, 它向網域 B(http://domain-b.com)請求圖片資源(http://domainb.b/image.jpg)。這是我們在網頁當中時長常常使用的一項技術,可載入其他網站資源,像是 CSS 樣式表、影像、程式碼等等資源。

CORS_principle

但基於安全性考量,程式碼所發出的跨站 HTTP 請求受到相當限制,好比說用 XMLHttpRequest 及 Fetch 發出的請求受限於同源政策(same-origin policy),所以 XMLHttpRequest 或 Fetch 只能發送 HTTP 請求到和其所來自的相同的網域.而國際上也有 OWASP在2007年開始關注這樣的一個安全行為,特別將幾個行為視為要加強預防的重點,對此感興趣的可以到 OWASP 官網看一下相關議題.

Chrome 預設也會拒絕此行為,這讓我們本機開發變成很麻煩.但我們可以將此權限打開.對於Chrome該如何開此權限跟為什麼要阻擋此行為可以參考之前的No Access-Control-Allow-Origin header is present on the requested resource

接下來我們就要介紹如何快速的建立一個靜態的網頁服務,幫我們解決本機開發的問題.

Node Package - node-static

node-static是一個NodeJS的模組,只需將放置靜態資料的目錄與服務監聽的Port設定好,即可快速的建立靜態網頁的服務.

只需用NPM進行安裝:

npm install --save node-static

本身的相依也不多:

dependency

接著讓我們嘗試用它來解決一個實例.

Facing Problem : Get Remote Video Resource from Local index.html

這邊我們介紹之前的一篇文章hls.js for Chrome Desktop為範例:

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <video preload="none" id="player" autoplay controls crossorigin></video>
    <script src="js/hls.js"></script>
    <video id="video"></video>
    <script>
        (function () {
            var video = document.getElementById('player');

            if (Hls.isSupported()) {
                var hls = new Hls();
                hls.loadSource('http://content.jwplatform.com/manifests/vM7nH0Kl.m3u8');
                hls.attachMedia(video);
                hls.on(Hls.Events.MANIFEST_PARSED, function () {
                    video.play();
                });
            }
        })();
    </script>
</body>

</html>

這邊我們可以看到本機網頁一打開就可以看到 CORS的相關錯誤:

index_error

而我們這邊透過安裝完node-static後,新增一個index.js的檔案並加入以下內容:

index.js:

var static = require('node-static');

//
// Create a node-static server instance to serve the './public' folder
//
var file = new static.Server('./index.html');

require('http').createServer(function (request, response) {
    request.addListener('end', function () {
        //
        // Serve files!
        //
        file.serve(request, response);
    }).resume();
}).listen(8080);

當我們新增完後別忘記要幫 package.json 設定指令去啟動服務:

{
  "name": "plyr-hls-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "blackie (http://blackie1019.github.io)",
  "license": "ISC",
  "dependencies": {
    "hls.js": "^0.7.6",
    "node-static": "^0.7.9",
  }
}

當建立完成後即可透過透過下方指令啟動靜態網頁服務

node start

執行畫面如下:

index_success

References


作者: Blackie
版權聲明: 本站所有文章除特別聲明外,均採用 CC BY 4.0 許可協議。轉載請註明來源 Blackie !
  目錄