自定义域名访问本地服务

现代前端开发模式：使用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会将大文件缓存到本地以加速，若是没有本地目录写入权限的话，则会抛出错误提示。

参考：

• VueJS dev serve with reverse proxy
• 前端开发如何独立解决跨域问题
• Hosts文件与域名解析