【原创】如何将域名代理到本地服务进行访问

需求背景

在咱们日常的开发工做中经常会碰到须要接入第三方权限验证服务的需求，通常这些验证服务都须要你在后台配置一个回调地址，一般来讲这个地址都是后端提供的一个 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，大功告成！

版权

做者：应开翔

来源：我的博客

著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。