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

問題

在開發一些「單頁應用」時，一般會使用 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-proxy