【原創】如何將域名代理到本地服務進行訪問

需求背景

在咱們日常的開發工做中經常會碰到須要接入第三方權限驗證服務的需求，通常這些驗證服務都須要你在後臺配置一個回調地址，一般來講這個地址都是後端提供的一個 api 接口。

服務方在驗證權限成功後會去調用這個地址，而且帶上一些參數如 token，ticket 來表示驗證的結果。最後調用方服務端根據參數再進行後續邏輯處理。

可是在一些場景下咱們可能沒法將後臺的回調地址配置成一個後端接口，而只能配置成前端的一個路由地址。在這種狀況下就須要前端去接受服務方給到的參數而後再由前端發送給後端。這個時候調試就成了一個很麻煩的問題，由於第三方服務基本都是不支持重定向到一個本地的 ip 地址的（http://127.0.0.1:<port>）。

解決方法

針對這個問題咱們有兩種相對簡單的方式，一種是手動複製 url 後面的參數，一種是將線上的域名代理到本地。

手動複製

手動複製就不說了，雖然無腦簡單，可是每次都要重複進行復制黏貼，對於調試來講是一個很繁瑣的工做，而且某些狀況下後臺配置的 url 地址還會重定向，token 也會有過時時間，這又大大增長了手動調試的麻煩。因此筆者在這裏並不推薦這樣不能一勞永逸的作法。

代理到本地

顧名思義就是將線上域名代理到本地啓動的服務，這樣咱們就能模擬出和線上同樣的狀態進行高效的代碼調試。這個時候你就會想到那我把本地 hosts 改了不就好了嗎？固然不行，由於線上的端口和你本地的端口不一致，因此沒法成功進行代理。

該如何代理？

既然是保證端口一致，那咱們只能將前端的本地服務啓動成和線上一致就好了。

這邊我將給到一個示例，就是將 https://juejin.im 掘金首頁代理到本地的一個 http://127.0.0.1 web 服務。由於如今大部分的 web 應用或者框架都是基於 webpack 搭建的，因此我這裏也使用 webpack 進行搭建。

1. 修改 hosts 配置

vim /ect/hosts

# 將掘金域名配置到本地
127.0.0.1 juejin.im
複製代碼

2. 啓動本地 web 服務

咱們能夠看到 https://juejin.im 這個地址是沒有端口號的，因此它的端口號默認就是 80。

webpack 配置以下：

module.exports = {
  devServer: {
    // disableHostCheck 用於防止 dns rebinding attack 的安全問題
    // 由於咱們是本地調試因此能夠將它關閉
    disableHostCheck: true,
    inline: true,
    host: '127.0.0.1',
    port: 80,
  }
}
複製代碼

linux 系統下默認用戶只能啓動 1024 以上的端口，因此啓動 80 端口咱們須要用到 sudo。

最後 sudo npx webpack-dev-server 啓動你的服務，而後使用 chrome 的無痕模式打開輸入 www.juejin.im，大功告成！

版權

做者：應開翔

來源：我的博客

著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。