开发公众号H5本地调试重定向登录流程

86 篇文章 14 订阅

微信公众号的网页开发授权微信信息,是需要重定向到微信的一个地址,然后重定向返回的,并且重定向返回的地址需要在公众号后台去配置域名,我们想要在本地调试此功能,就需要在本地做一个域名映射来实现;

第一步:修改host文件 计算机路径  C:\Windows\System32\drivers\etc ,修改如下:

注意 test.saas.com 就是你想要映射的域名


#	127.0.0.1       localhost
#	::1             localhost

127.0.0.1 test.saas.com

第二步:验证是否配置成功

使用IDE,运行项目,使本地能够访问,然后把 localhost 改成刚才想映射的域名访问,

例如:  http://test.saas.com:8080/zhenyu-club/  能访问了就证明成功了

接下来可以本地调试了,需要注意的是,本地调试完毕以后,上传到真的测试环境想再测试,需要打开计算机路径  C:\Windows\System32\drivers\etc 把 127.0.0.1 test.saas.com 给注释掉,注释就是在当前行最前面加一个#号。

第三步:关闭 host 检查

因为新版的 webpack-dev-server 出于安全考虑,默认检查 hostname,如果hostname不是配置内的就不能访问。

解决办法:设置跳过host检查

打开你的项目全局搜索 devServer ,在 devServer 里面添加 "disableHostCheck": true,

如下:

disableHostCheck 设置为 true 的意思就是设置跳过host检查。

结束;

另外来个福利内容,本地配置 nginx反向代理;

nginx反向代理服务:浏览器输入网址并回车后,会发起一个http请求给nginx(反向代理服务器),这个请求如果是访问静态文件,那么nginx作为web服务器直接返回请求的内容,如果是访问的后台服务逻辑,那么nginx把请求转发给后端的服务处理。

1.下载nginx

http://nginx.org/en/download.html   

下载后解压,解压后如下

 

2.启动nginx

有很多种方法启动nginx

(1)直接双击nginx.exe,双击后一个黑色的弹窗一闪而过

(2)打开cmd命令窗口,切换到nginx解压目录下,输入命令 nginx.exe 或者 start nginx ,回车即可

3.检查nginx是否启动成功

直接在浏览器地址栏输入网址 http://localhost,回车,出现以下页面说明启动成功

也可以在cmd命令窗口输入命令 tasklist /fi "imagename eq nginx.exe" ,出现如下结果说明启动成功

 

nginx的配置文件是conf目录下的nginx.conf,默认配置的nginx监听的端口为80,如果80端口被占用可以修改为未被占用的端口即可

proxy_pass  后面的域名,就是本地反向代理的域名


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
			proxy_pass  http://xxx.saas.com.cn/;
        #    root   html;
        #   index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

 

检查80端口是否被占用的命令是: netstat -ano | findstr 0.0.0.0:80 或 netstat -ano | findstr "80"

当我们修改了nginx的配置文件nginx.conf 时,不需要关闭nginx后重新启动nginx,只需要执行命令 nginx -s reload 即可让改动生效

4.关闭nginx

如果使用cmd命令窗口启动nginx,关闭cmd窗口是不能结束nginx进程的,可使用两种方法关闭nginx

(1)输入nginx命令  nginx -s stop(快速停止nginx)  或  nginx -s quit(完整有序的停止nginx)

(2)使用taskkill   taskkill /f /t /im nginx.exe

5.使用nginx代理服务器做负载均衡

我们可以修改nginx的配置文件nginx.conf 达到访问nginx代理服务器时跳转到指定服务器的目的,即通过proxy_pass 配置请求转发地址,即当我们依然输入http://localhost:80 时,请求会跳转到我们配置的服务器

 

同理,我们可以配置多个目标服务器,当一台服务器出现故障时,nginx能将请求自动转向另一台服务器,例如配置如下:

当服务器 localhost:8080 挂掉时,nginxnginx能将请求自动转向服务器 192.168.101.9:8080 。上面还加了一个weight属性,此属性表示各服务器被访问到的权重,weight

越高被访问到的几率越高。

6.nginx配置静态资源

 将静态资源(如jpg|png|css|js等)放在如下配置的f:/nginx-1.12.2/static目录下,然后在nginx配置文件中做如下配置(注意:静态资源配置只能放在 location / 中),浏览器中访问  http://localhost:80/1.png 即可访问到 f:/nginx-1.12.2/static目录下的 1.png图片

 

 

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a_靖

对你有帮助吗?打赏鼓励一下?

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值