摘要：用解決問(wèn)題是一個(gè)，和等框架類似，用于開(kāi)發(fā)應(yīng)用或網(wǎng)站，這里不去比較各個(gè)框架的優(yōu)劣，而是去解決跨域問(wèn)題。

在開(kāi)發(fā)一些「單頁(yè)應(yīng)用」時(shí)，通常會(huì)使用 Ajax 和服務(wù)器通訊，比如 RESTful API，通常「前端」和「服務(wù)端 API」可能是有不同人員在負(fù)責(zé)，也不在同一個(gè)工程下，那么開(kāi)發(fā)過(guò)程中就可能會(huì)遇到跨域的問(wèn)題，比如 Chrome 會(huì)在 console 中看到這樣的錯(cuò)誤消息:

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.

瀏覽器因?yàn)榘踩?，有「同源策略」不允許「跨域」，有時(shí)也會(huì)給開(kāi)發(fā)過(guò)程帶來(lái)一點(diǎn)點(diǎn)小麻煩。

1. Access-Control-Allow-Origin

目前主流瀏覽器都支持，通過(guò)在服務(wù)器的響應(yīng)頭信息中添加 Access-Control-Allow-Origin 以聲明允許來(lái)自那些「域」的跨域請(qǐng)求，比如:

Access-Control-Allow-Origin: xxx.xyz

也可以允許任何來(lái)源的跨域請(qǐng)求

Access-Control-Allow-Origin: *

很少有場(chǎng)景必須要在「生產(chǎn)環(huán)境」使用 *，如果開(kāi)發(fā)環(huán)境使用 *，那么在部署到生產(chǎn)環(huán)境時(shí)，為了安全啟見(jiàn)，無(wú)論手動(dòng)還是自動(dòng)的方式，都需要換成「特定的域」

當(dāng)然在開(kāi)發(fā)環(huán)境也可指定特定的「域」，如上邊的 xxx.xyz，那開(kāi)發(fā)過(guò)程中就需要每個(gè)開(kāi)發(fā)人員添加 host 配置，如下:

127.0.0.1 xxx.xyz

1. nginx 反向代理

用代理的方式解決的跨域問(wèn)題，就不要添加什么「響應(yīng)頭」了，用 nginx 搭建一個(gè)「用于開(kāi)發(fā)」的 WebServer，然后，我們可以把某些 URL 轉(zhuǎn)發(fā)到「目標(biāo)地址」，然后前端用 ajax 請(qǐng)求同域下的地址，這樣自然就不存在「跨域問(wèn)題」了，nginx 配置大約如下：

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

這個(gè)方式，需要讓每個(gè)前端開(kāi)發(fā)人員安裝并配置 nginx，雖然可以正好學(xué)習(xí) nginx，卻還是稍顯麻煩。

Nokitjs 是一個(gè)「A Web development framework」，和 express/koa/hapi 等框架類似，用于開(kāi)發(fā)「Web 應(yīng)用或網(wǎng)站」，這里不去比較各個(gè)框架的優(yōu)劣，而是去解決「跨域」問(wèn)題。

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

npm install nokitjs -g

Nokit CLI 一般用于啟動(dòng)「基于 Nokit 開(kāi)發(fā)的應(yīng)用」，同時(shí)它也能在「指定的目錄」啟動(dòng)一個(gè)「靜態(tài) WebServer」，如下:

nokit start [端口] [應(yīng)用目錄省略時(shí)為當(dāng)前目錄](méi) [其它選項(xiàng)]

「其它選項(xiàng)」中有一個(gè) -pulibc 選項(xiàng)，可以指定「靜態(tài)資源目錄」，如下命令，將在當(dāng)前目錄啟一個(gè)「靜態(tài) WebServer」

npm start 8000 -public=./

如何解決跨域問(wèn)題？，還需要一個(gè)插件 nokit-filter-proxy，接下來(lái)用一個(gè)實(shí)例說(shuō)明，假如我們有一個(gè)工程，結(jié)構(gòu)如下:

應(yīng)用目錄
├── dist
├── package.json
└── src

dist 是「構(gòu)建工具」Build 的目標(biāo)目錄，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",
    ...
}
...

現(xiàn)在，「不需要全局安裝」 nokitjs，在「應(yīng)用目錄」執(zhí)行：

npm start

即可啟動(dòng)一個(gè)「靜態(tài) WebServer」，將會(huì)看到如下提示：

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

就可以在瀏覽器中訪問(wèn) http://localhost:8000 了。

然后配置 nokit-filter-proxy，在「應(yīng)用目錄」新建一個(gè)文件 config.json，寫入如下內(nèi)容：

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

如上配置，首先注冊(cè)了 nokit-filter-proxy，然后添加了一條轉(zhuǎn)發(fā)規(guī)則，將所有 /api 開(kāi)頭的 URL 轉(zhuǎn)發(fā)到 http://xxx.xyz/，比如:

GET /api/user/id

將會(huì)被轉(zhuǎn)發(fā)到

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

可以添加任意多條轉(zhuǎn)發(fā)規(guī)則，規(guī)則越靠后優(yōu)化級(jí)越高。

相比 nginx 省事不少，不需要每個(gè)開(kāi)發(fā)人員再安裝配置 nginx，可以在獲取代碼后，直接執(zhí)行

npm install

完成所有依賴的安裝，然后便可以使用 npm start 啟動(dòng) Server，并在瀏覽器中預(yù)覽或調(diào)試了。

另外，在啟動(dòng)時(shí)還可以通過(guò) -config 選項(xiàng)指定配置文件名，比如

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

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

或許，還希望不同的「環(huán)境」轉(zhuǎn)發(fā)到不同的「地址」，又或者每個(gè)開(kāi)發(fā)人員需要不同轉(zhuǎn)發(fā)規(guī)則，可以通過(guò) -env 指定不同的環(huán)境配置，也可以通過(guò)「系統(tǒng)環(huán)境變量 NODE_ENV」指定，如下

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

或

export NODE_ENV=local

這樣，在應(yīng)用目錄可以建立一個(gè) config.local.json 文件，格式和 config.json 相同，nokit 會(huì)合并這兩個(gè)文件，相同的配置節(jié)「環(huán)境配置文件」將覆蓋「默認(rèn)配置文件」的配置。

最后附上相關(guān)模塊的 GitHub 地址:

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

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