自定义域名访问本地服务

现代前端开发模式：使用node起本地服务，然后通过localhost或127.0.0.1直接访问调试。相信这是大部分前端开发每天的工作模式，绝大部分情况下，这没有任何问题。但是对于一些特殊场景：如微信公众号或者钉钉H5微应用等需要内嵌在第三方平台调试的情况，会限制直接使用localhost本地域名，这时候我们就需要使用真实的域名来访问我们的本地服务了。

使用正向代理

以Charles为例，说明如何使用正向代理，将域名对应的请求转发到本地服务。

首先开启Charles的HTTP代理服务：

然后，开启Map Remote代理：

再添加相应的代理转发规则，将目标域名转发到本地服务的指定端口：

最后，将浏览器的代理指向本机的Charles服务：

这样，当我们访问http://www.demo.com的时候，就直接转发到http://localhost:8082这个本地服务了。

使用反向代理

除了正向代理，我们也可以使用修改hosts文件 + nginx反向代理来实现。

首先，通过修改hosts文件，将目标域名的请求转发到本地：

127.0.0.1 www.demo.com

因为hosts文件不支持端口转发，所以我们还需要在本地起nginx服务，监听80端口并反向代理到本地的node服务：

server {
    listen 80;
    server_name *.demo.com;

    location / {
        proxy_pass  http://localhost:8082/;
        proxy_set_header Host localhost;
        proxy_set_header Origin localhost;
        proxy_hide_header Access-Control-Allow-Origin;
        add_header Access-Control-Allow-Origin "http://www.demo.com";
    }

    location /sockjs-node/ {
        proxy_pass http://localhost:8082;
        proxy_set_header Host localhost;
        proxy_set_header Origin localhost;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_hide_header Access-Control-Allow-Origin;
        add_header Access-Control-Allow-Origin "http://www.demo.com";
    }
}

这里的/sockjs-node/配置，是用于hot reload的。

配置完之后，使用nginx -s reload重启服务，再访问http://www.demo.com的时候，请求得到的就是http://localhost:8082这个本地服务的内容了。

如果访问的时候遇到报错，提示无权限，可以使用下面的命令来解决：

sudo nginx -s stop
sudo chmod -R 777 /usr/local/var/run/nginx/*

这是因为开发模式下的脚本没有经过压缩，文件会比较大，而nginx会将大文件缓存到本地以加速，如果没有本地目录写入权限的话，则会抛出错误提示。

参考：