用 Nokitjs 解決前端開發中的跨域問題

Houfeng發表於2019-02-16
JS前端跨域

問題

在開發一些「單頁應用」時，通常會使用 Ajax 和伺服器通訊，比如 RESTful API，通常「前端」和「服務端 API」可能是有不同人員在負責，也不在同一個工程下，那麼開發過程中就可能會遇到跨域的問題，比如 Chrome 會在 console 中看到這樣的錯誤訊息:

XMLHttpRequest cannot load http://google.com/. No `Access-Control-Allow-Origin` header is present on the requested resource. Origin `http://run.jsbin.io` is therefore not allowed access.

瀏覽器因為安全原因，有「同源策略」不允許「跨域」，有時也會給開發過程帶來一點點小麻煩。

常見方法

1. Access-Control-Allow-Origin

目前主流瀏覽器都支援，通過在伺服器的響應頭資訊中新增 Access-Control-Allow-Origin 以宣告允許來自那些「域」的跨域請求，比如:

Access-Control-Allow-Origin: xxx.xyz

也可以允許任何來源的跨域請求

Access-Control-Allow-Origin: *

很少有場景必須要在「生產環境」使用 *，如果開發環境使用 *，那麼在部署到生產環境時，為了安全啟見，無論手動還是自動的方式，都需要換成「特定的域」

當然在開發環境也可指定特定的「域」，如上邊的 xxx.xyz，那開發過程中就需要每個開發人員新增 host 配置，如下:

127.0.0.1 xxx.xyz
1. nginx 反向代理

用代理的方式解決的跨域問題，就不要新增什麼「響應頭」了，用 nginx 搭建一個「用於開發」的 WebServer，然後，我們可以把某些 URL 轉發到「目標地址」，然後前端用 ajax 請求同域下的地址，這樣自然就不存在「跨域問題」了，nginx 配置大約如下：

...
location /api/ {
    rewrite  ^/api/(.*)  /$1 break;
    ...
} 
...

這個方式，需要讓每個前端開發人員安裝並配置 nginx，雖然可以正好學習 nginx，卻還是稍顯麻煩。

用 Nokitjs 解決問題

Nokitjs 是一個「A Web development framework」，和 express/koa/hapi 等框架類似，用於開發「Web 應用或網站」，這裡不去比較各個框架的優劣，而是去解決「跨域」問題。

Nokitjs 提供了「命令列工具」，在終端中直接使用「Nokit CLI」需要全域性安裝 Nokit:

npm install nokitjs -g

Nokit CLI 一般用於啟動「基於 Nokit 開發的應用」，同時它也能在「指定的目錄」啟動一個「靜態 WebServer」，如下:

nokit start [埠] [應用目錄省略時為當前目錄] [其它選項]

「其它選項」中有一個 -pulibc 選項，可以指定「靜態資源目錄」，如下命令，將在當前目錄啟一個「靜態 WebServer」

npm start 8000 -public=./

如何解決跨域問題？，還需要一個外掛 nokit-filter-proxy，接下來用一個例項說明，假如我們有一個工程，結構如下:

應用目錄
├── dist
├── package.json
└── src

dist 是「構建工具」Build 的目標目錄，src 是原始碼目錄，package.json 是 NPM 包配置檔案。

安裝 nokitjs 和 nokit-filter-proxy 並儲存到 devDependencies

npm install nokitjs nokit-filter-proxy --save-dev

配置 package.json 的 scripts，如下

...
"scripts": {
    "start": "nokit start 8000 -public=./dist",
    "stop": "nokit stop",
    "restart": "npm stop && npm start",
    ...
}
...

現在，「不需要全域性安裝」 nokitjs，在「應用目錄」執行：

npm start

即可啟動一個「靜態 WebServer」，將會看到如下提示：

[Nokit][L]: Starting...
[Nokit][L]: The server on "localhost:8000" started

就可以在瀏覽器中訪問 http://localhost:8000 了。

然後配置 nokit-filter-proxy，在「應用目錄」新建一個檔案 config.json，寫入如下內容：

{
    "filters": {
        "^/": "nokit-filter-proxy"
     },
     "proxy": {
        "rules": {
          "^/api/(.*)": "http://xxx.xyz/"
        }
     }
}

如上配置，首先註冊了 nokit-filter-proxy，然後新增了一條轉發規則，將所有 /api 開頭的 URL 轉發到 http://xxx.xyz/，比如:

GET /api/user/id

將會被轉發到

GET http://xxx.xyz/user/id

可以新增任意多條轉發規則，規則越靠後優化級越高。

相比 nginx 省事不少，不需要每個開發人員再安裝配置 nginx，可以在獲取程式碼後，直接執行

npm install

完成所有依賴的安裝，然後便可以使用 npm start 啟動 Server，並在瀏覽器中預覽或除錯了。

另外，在啟動時還可以通過 -config 選項指定配置檔名，比如

nokit start 8000 -public=./dist -config=webserver

這樣，應用根目錄的 config.json 就可以換成 webserver.json 了。

或許，還希望不同的「環境」轉發到不同的「地址」，又或者每個開發人員需要不同轉發規則，可以通過 -env 指定不同的環境配置，也可以通過「系統環境變數 NODE_ENV」指定，如下

nokit start 8000 -public=./dist -env=local

或

export NODE_ENV=local

這樣，在應用目錄可以建立一個 config.local.json 檔案，格式和 config.json 相同，nokit 會合並這兩個檔案，相同的配置節「環境配置檔案」將覆蓋「預設配置檔案」的配置。

最後附上相關模組的 GitHub 地址:

  1. nokitjs https://github.com/nokitjs/nokit

  2. nokit-filter-proxy https://github.com/nokitjs/nokit-filter-…

相關文章