用 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 地址:
- nokitjs https://github.com/nokitjs/nokit
- nokit-filter-proxy https://github.com/nokitjs/nokit-filter-proxy