資訊專欄INFORMATION COLUMN
摘要：用解決問題是一個(gè)，和等框架類似，用于開發(fā)應(yīng)用或網(wǎng)站，這里不去比較各個(gè)框架的優(yōu)劣，而是去解決跨域問題。
問題
在開發(fā)一些「單頁應(yīng)用」時(shí)，通常會(huì)使用 Ajax 和服務(wù)器通訊，比如 RESTful API，通常「前端」和「服務(wù)端 API」可能是有不同人員在負(fù)責(zé)，也不在同一個(gè)工程下，那么開發(fā)過程中就可能會(huì)遇到跨域的問題，比如 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ì)給開發(fā)過程帶來一點(diǎn)點(diǎn)小麻煩。
常見方法目前主流瀏覽器都支持，通過在服務(wù)器的響應(yīng)頭信息中添加 Access-Control-Allow-Origin 以聲明允許來自那些「域」的跨域請(qǐng)求，比如:
Access-Control-Allow-Origin: xxx.xyz
也可以允許任何來源的跨域請(qǐng)求
Access-Control-Allow-Origin: *
很少有場景必須要在「生產(chǎn)環(huán)境」使用 *，如果開發(fā)環(huán)境使用 *，那么在部署到生產(chǎn)環(huán)境時(shí)，為了安全啟見，無論手動(dòng)還是自動(dòng)的方式，都需要換成「特定的域」
當(dāng)然在開發(fā)環(huán)境也可指定特定的「域」，如上邊的 xxx.xyz，那開發(fā)過程中就需要每個(gè)開發(fā)人員添加 host 配置，如下:
127.0.0.1 xxx.xyz
用代理的方式解決的跨域問題，就不要添加什么「響應(yīng)頭」了，用 nginx 搭建一個(gè)「用于開發(fā)」的 WebServer，然后，我們可以把某些 URL 轉(zhuǎn)發(fā)到「目標(biāo)地址」，然后前端用 ajax 請(qǐng)求同域下的地址，這樣自然就不存在「跨域問題」了，nginx 配置大約如下：
...
location /api/ {
rewrite ^/api/(.*) /$1 break;
...
}
...
這個(gè)方式，需要讓每個(gè)前端開發(fā)人員安裝并配置 nginx，雖然可以正好學(xué)習(xí) nginx，卻還是稍顯麻煩。
用 Nokitjs 解決問題Nokitjs 是一個(gè)「A Web development framework」，和 express/koa/hapi 等框架類似，用于開發(fā)「Web 應(yīng)用或網(wǎng)站」，這里不去比較各個(gè)框架的優(yōu)劣，而是去解決「跨域」問題。
Nokitjs 提供了「命令行工具」，在終端中直接使用「Nokit CLI」需要全局安裝 Nokit:
npm install nokitjs -g
Nokit CLI 一般用于啟動(dòng)「基于 Nokit 開發(fā)的應(yīng)用」，同時(shí)它也能在「指定的目錄」啟動(dòng)一個(gè)「靜態(tài) WebServer」，如下:
nokit start [端口] [應(yīng)用目錄省略時(shí)為當(dāng)前目錄] [其它選項(xiàng)]
「其它選項(xiàng)」中有一個(gè) -pulibc 選項(xiàng)，可以指定「靜態(tài)資源目錄」，如下命令，將在當(dāng)前目錄啟一個(gè)「靜態(tài) WebServer」
npm start 8000 -public=./
如何解決跨域問題？，還需要一個(gè)插件 nokit-filter-proxy，接下來用一個(gè)實(shí)例說明，假如我們有一個(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
就可以在瀏覽器中訪問 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 開頭的 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è)開發(fā)人員再安裝配置 nginx，可以在獲取代碼后，直接執(zhí)行
npm install
完成所有依賴的安裝，然后便可以使用 npm start 啟動(dòng) Server，并在瀏覽器中預(yù)覽或調(diào)試了。
另外，在啟動(dòng)時(shí)還可以通過 -config 選項(xiàng)指定配置文件名，比如
nokit start 8000 -public=./dist -config=webserver
這樣，應(yīng)用根目錄的 config.json 就可以換成 webserver.json 了。
或許，還希望不同的「環(huán)境」轉(zhuǎn)發(fā)到不同的「地址」，又或者每個(gè)開發(fā)人員需要不同轉(zhuǎn)發(fā)規(guī)則，可以通過 -env 指定不同的環(huán)境配置，也可以通過「系統(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-...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49814.html
摘要：用解決問題是一個(gè)，和等框架類似，用于開發(fā)應(yīng)用或網(wǎng)站，這里不去比較各個(gè)框架的優(yōu)劣，而是去解決跨域問題。 問題 在開發(fā)一些「單頁應(yīng)用」時(shí)，通常會(huì)使用 Ajax 和服務(wù)器通訊，比如 RESTful API，通?！盖岸恕购汀阜?wù)端 API」可能是有不同人員在負(fù)責(zé)，也不在同一個(gè)工程下，那么開發(fā)過程中就可能會(huì)遇到跨域的問題，比如 Chrome 會(huì)在 console 中看到這樣的錯(cuò)誤消息: XMLH...
摘要：二解決思路知道是客戶端瀏覽器為了安全使用同源策略導(dǎo)致的，而服務(wù)端是沒有這個(gè)限制的，那我們就只能通過服務(wù)端進(jìn)行跨域了。哈哈，這也是為啥后端和生產(chǎn)環(huán)境下比較少聽說跨域的問題，所以這里介紹開發(fā)環(huán)境中的幾種方法。 一、為什么會(huì)有跨越問題是客戶端瀏覽器同源策略導(dǎo)致的，就是瀏覽器不允許不同源的站點(diǎn)相互訪問。試想一下要是沒有這個(gè)，那站點(diǎn)里的安全信息如cookie，賬號(hào)/密碼等是不是很容易被其它站點(diǎn)獲...
摘要：此時(shí)完成的跨域代理配置僅僅是在開發(fā)環(huán)境下生效，到了生產(chǎn)環(huán)境下如果是放到服務(wù)器上則還需要借助的反向代理來進(jìn)行跨域的代理?？缬?指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本，它是由瀏覽器的同源策略造成的，是瀏覽器對(duì) JavaScript 施加的安全限制。同源就是指 域名，協(xié)議，端口 均相同。兩個(gè)網(wǎng)域若 域名、協(xié)議、端口 任一不同則二者的通信就出現(xiàn)了跨域問題，前端的跨域問題普通存在于兩個(gè)階段，一個(gè)是開發(fā)環(huán)境...
閱讀 1686·2021-11-17 09:33
閱讀 3547·2021-11-16 11:40
閱讀 3066·2019-08-30 11:23
閱讀 1059·2019-08-29 16:36
閱讀 2477·2019-08-29 13:23
閱讀 1751·2019-08-29 12:59
閱讀 1555·2019-08-29 12:42
閱讀 1992·2019-08-28 18:22
