誰說前端須要懂 Nginx 了？

--讀《誰說前端不須要懂-Nginx反向代理與負載均衡》有感

讀了上文發現內容雖然仍是挺好的，但看完，爲啥要懂nginx呀，負載均衡和前端哪裏有什麼半毛錢關係了，沒說清楚呀。

固然這個面向前端作個科普文讓你們多知道一項只是仍是不錯的，文章拉到最後面看了下做者的使用場景舉例提及個 host 給讓產品走查。 這不就是起個webserver 容器麼，和反向代理麼？

這篇內容很熱，結合最近聊天羣里老是有人問起，我想前端還有不少人想知道這方面知識的，因此在這裏也科普下，經常使用的代理方式有哪些。

本文廣受朋友喜好，說明對不少朋友仍是有幫助的，另外很多網友對本文的標題意見很大，本文的標題針對引文標題來講，主旨爲的是強調有更合適的方法作更正確的事情，並不阻止你們學習更多知識

招式1、 使用 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? 更多參數能夠查詢官方文檔 http-server。

此工具的亮點在於零配置，隨時隨地啓動 給小夥伴走查、移動端調試不是三秒搞定麼，難道必定須要那麼麻煩去寫個nginx 配置？

招式2、使用 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 工程項目，隨項目啓動自動開啓

招式3、使用 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);
複製代碼

更多介紹看官網文檔

招式4、使用框架自帶代理方式如 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 哈？

此方式是工程化後的正確使用姿式

招式5、實際上這個不是代理，可是也能解決你的跨域問題。

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/your/path/
複製代碼

還有個方式固然就是 nginx 啦

你能夠繼續瞭解他 誰說前端不須要懂-Nginx反向代理與負載均衡