資訊專欄INFORMATION COLUMN
摘要：用解決問題是一個，和等框架類似，用于開發應用或網站，這里不去比較各個框架的優劣，而是去解決跨域問題。
問題
在開發一些「單頁應用」時，通常會使用 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.
瀏覽器因為安全原因，有「同源策略」不允許「跨域」，有時也會給開發過程帶來一點點小麻煩。
常見方法目前主流瀏覽器都支持，通過在服務器的響應頭信息中添加 Access-Control-Allow-Origin 以聲明允許來自那些「域」的跨域請求，比如:
Access-Control-Allow-Origin: xxx.xyz
也可以允許任何來源的跨域請求
Access-Control-Allow-Origin: *
很少有場景必須要在「生產環境」使用 *，如果開發環境使用 *，那么在部署到生產環境時，為了安全啟見，無論手動還是自動的方式，都需要換成「特定的域」
當然在開發環境也可指定特定的「域」，如上邊的 xxx.xyz，那開發過程中就需要每個開發人員添加 host 配置，如下:
127.0.0.1 xxx.xyz
用代理的方式解決的跨域問題，就不要添加什么「響應頭」了，用 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-...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79211.html
摘要：用解決問題是一個，和等框架類似，用于開發應用或網站，這里不去比較各個框架的優劣，而是去解決跨域問題。 問題 在開發一些「單頁應用」時，通常會使用 Ajax 和服務器通訊，比如 RESTful API，通常「前端」和「服務端 API」可能是有不同人員在負責，也不在同一個工程下，那么開發過程中就可能會遇到跨域的問題，比如 Chrome 會在 console 中看到這樣的錯誤消息: XMLH...
摘要：二解決思路知道是客戶端瀏覽器為了安全使用同源策略導致的，而服務端是沒有這個限制的，那我們就只能通過服務端進行跨域了。哈哈，這也是為啥后端和生產環境下比較少聽說跨域的問題，所以這里介紹開發環境中的幾種方法。 一、為什么會有跨越問題是客戶端瀏覽器同源策略導致的，就是瀏覽器不允許不同源的站點相互訪問。試想一下要是沒有這個，那站點里的安全信息如cookie，賬號/密碼等是不是很容易被其它站點獲...
摘要：此時完成的跨域代理配置僅僅是在開發環境下生效，到了生產環境下如果是放到服務器上則還需要借助的反向代理來進行跨域的代理。跨域 指的是瀏覽器不能執行其他網站的腳本，它是由瀏覽器的同源策略造成的，是瀏覽器對 JavaScript 施加的安全限制。同源就是指 域名，協議，端口 均相同。兩個網域若 域名、協議、端口 任一不同則二者的通信就出現了跨域問題，前端的跨域問題普通存在于兩個階段，一個是開發環境...
閱讀 1030·2021-09-22 15:26
閱讀 2607·2021-09-09 11:52
閱讀 1890·2021-09-02 09:52
閱讀 2241·2021-08-12 13:28
閱讀 1180·2019-08-30 15:53
閱讀 506·2019-08-29 13:47
閱讀 3380·2019-08-29 11:00
閱讀 3095·2019-08-29 10:58
