手把手教你如何将线上域名代理到本地

需求背景

在我们平常的开发工作中常常会碰到需要接入第三方权限验证服务的需求，一般这些验证服务都需要你在后台配置一个回调地址，通常来说这个地址都是后端提供的一个 api 接口。

服务方在验证权限成功后会去调用这个地址，并且带上一些参数如 token，ticket 来表示验证的结果。最后调用方根据参数再进行后续逻辑处理。

但是在一些场景下我们可能无法将这个回调地址配置成一个后端接口，而只能配置成一个前端的路由地址。在这种情况下就需要前端去接收服务方发送的参数然后再由前端发送给后端。这个时候调试就成了一个很麻烦的问题，因为第三方服务基本都是不支持重定向到一个本地的 ip 地址的（http://127.0.0.1:<port>）。

解决方法

针对这个问题我们有两种相对简单的方式，一种是手动复制 url 后面的参数，一种是将线上的域名代理到本地。

手动复制

手动复制就不说了，虽然简单无脑，但是每次都要重复进行复制黏贴，对于调试来说是一个很繁琐的工作，并且某些情况下前端还会重定向导致参数消失，token 也会有过期时间，这又大大增加了手动调试的麻烦。所以笔者在这里并不推荐这种不能一劳永逸的做法。

代理到本地

顾名思义就是将线上域名代理到本地启动的服务，这样我们就能模拟出和线上一样的状态进行高效的代码调试。这个时候你就会想到那我把本地 hosts 改了不就行了吗？当然不行。

首先 hosts 是用来进行域名解析的，如果你配置了 hosts 系统就不会通过 DNS 进行查询，所以是不支持端口映射的。

其次一般我们访问站点时 url 中是没有端口号的，所以这些地址对应的端口就是 http 协议默认的端口 80，而一般我们前端启动的本地服务都是从 1024 开始的，因为不是 sudo 权限。

该如何代理？

示例代码在此

本质上我们要解决的问题就是保证端口一致。

这边我将给到一个示例，就是将 http://www.baidu.com 代理到一个本地的 web 服务。我将使用 webpack 做示例。

1. 修改 hosts 配置

vim /ect/hosts

# 将百度域名配置到本地
127.0.0.1 www.baidu.com

# 将系统本地映射注释掉
# 127.0.0.1 localhost

你可以通过 ping www.baidu.com 进行验证。

2. 启动本地 web 服务

webpack 配置如下：

module.exports = {
  devServer: {
    // disableHostCheck 用于防止 dns rebinding attack 的安全问题
    // 因为我们是本地调试所以可以将它关闭
    disableHostCheck: true,
    inline: true,
    host: '0.0.0.0',
    port: 80,
  }
}

linux 系统下默认用户只能启动 1024 以上的端口，所以启动 80 端口时我们需要用到 sudo。

最后 sudo npx webpack-dev-server 启动你的服务，并使用 chrome 的无痕模式打开 www.baidu.com，大功告成！

转载请注明出处，或者在评论或私信中联系我哦~