》有感
讀了上文發現内容雖然還是挺好的，但看完，為啥要懂nginx呀，負載均衡和前端哪裡有什麼半毛錢關系了，沒說清楚呀。
當然這個面向前端做個科普文讓大家多知道一項隻是還是不錯的，文章拉到最後面看了下作者的使用場景舉例說起個 host 給讓産品走查。
這不就是起個webserver 容器麼，和反向代理麼？
這篇内容很熱，結合最近聊天群裡總是有人問起，我想前端還有很多人想知道這方面知識的，是以在這裡也科普下，常用的代理方式有哪些。
本文廣受朋友喜愛，說明對很多朋友還是有幫助的，另外不少網友對本文的标題意見很大，本文的标題針對引文标題來說，主旨為的是強調有更合适的方法做更正确的事情，并不阻止大家學習更多知識
招式一、 使用 http-server 子產品進行代理
熟悉 nodejs 的朋友應該知道有個非常好和強大的工具子產品
http-server這是一枚小火箭能幫助你直沖雲霄，使用方式如下：
首先需要安裝 nodejs （對于nodejs 合格的前端應該都安裝上了吧？這裡就不複述了）。
安裝全局子產品
npm install http-server -g
然後到你需要運作展示的 html 資源目錄執行
http-server -P http://www.your-backend.com/api
http://www.your-backend.com/api 是你後端反向代理的接口位址，你需要修改成你自己的。
然後你就可以使用 http://localhost:8080 進行通路了（如果 8080 端口不被占用掉的話，若占用了你可以 -p 指定其他端口 ），是不是超級 easy?
更多參數可以查詢官方文檔
。
此工具的亮點在于零配置，随時随地啟動
給小夥伴走查、移動端調試不是三秒搞定麼，難道一定需要那麼麻煩去寫個nginx 配置？
招式二、使用 webpack 配置代理
webpack 對于前端來說是個強大的工具, 除了能夠幫助你打包和啟動調試伺服器外, 代理的功能也值得你了解下。 慣例上官網資料
文檔位址最簡方式:
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};
上述配置将自動把 /api 這一位址的通路轉請求到 http://localhost:3000 進而起到了代理的作用。
如果你的規則需要去掉 api 字首，你可以使用重寫位址的方式。
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
}
};
你可能還遇到 https 的安全問題觸發未驗證的證書錯誤, 則你可以簡單的加上 secure: false 來處理
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false
}
}
}
};
有時你不想代理所有的請求。可以基于一個函數的傳回值繞過代理。
在函數中你可以通路請求體、響應體和代理選項。必須傳回 false 或路徑，來跳過代理請求。
例如：對于浏覽器請求，你想要提供一個 HTML 頁面，但是對于 API 請求則保持代理。你可以這樣做：
proxy: {
"/api": {
target: "http://localhost:3000",
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf("html") !== -1) {
console.log("Skipping proxy for browser request.");
return "/index.html";
}
}
}
}
多個路徑的代理
proxy: [{
context: ["/auth", "/api"],
target: "http://localhost:3000",
}]
總之 webpack 提供了多種靈活的方式, 相信大多時候都能滿足到你到要求。
此方式最合适項目已經使 webpack 工程項目，随項目啟動自動開啟
招式三、使用 nodejs 的 node-http-proxy 子產品來處理
node-http-proxy提供了一個可以程式設計模式的代理環境，如果你有很特殊的需求如session、cookie 已綁定的域處理成其他的域什麼，或是内容還要轉換處理等，你可以用這個方式來處理複雜的 hacker.
如增加特殊請求頭；
var http = require('http'),
httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({});
proxy.on('proxyReq', function(proxyReq, req, res, options) {
proxyReq.setHeader('X-Special-Proxy-Header', 'foobar');
});
var server = http.createServer(function(req, res) {
// You can define here your custom logic to handle the request
// and then proxy the request.
proxy.web(req, res, {
target: 'http://127.0.0.1:5060'
});
});
console.log("listening on port 5050")
server.listen(5050);
招式四、使用架構自帶代理方式如 angular 的 proxy.
angular 的 proxy 寫法形式和 webpack 基本一樣, 你需要一份如下的配置檔案 proxy.conf.json 我的開源項目
typerx采用的就是這種方式
{
"/api": {
"target": "http://localhost:5400/",
"secure": false
},
"/user": {
"target": "http://localhost:5400/",
"secure": false
},
"/uploads": {
"target": "http://localhost:5400/",
"secure": false
}
}
配置完成之後使用 proxy-config 參數指定 proxy.conf.json 即可調用代理配置
ng serve --proxy-config proxy.conf.json
, 如果你看完更多方式是不是覺得和 webpack 是一樣的呢，實際上他就是 webpack 哈？
此方式是工程化後的正确使用姿勢
招式五、實際上這個不是代理，但是也能解決你的跨域問題。
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/your/path/
原文釋出時間為：2018年06月22日
原文作者：vellengs
本文來源：
掘金如需轉載請聯系原作者
![JavaScript的那些坑之事件代理事件代理事件階段[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)