阅读 1507

自定义域名访问本地服务

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

使用正向代理

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

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

image

然后,开启Map Remote代理:

image

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

image

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

image

这样,当我们访问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会将大文件缓存到本地以加速,如果没有本地目录写入权限的话,则会抛出错误提示。

参考:

文章分类
前端
文章标签