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

野性酷女 2022-10-05 05:50 264阅读 0赞

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

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

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

#	127.0.0.1       localhost
    #	::1             localhost
    
    127.0.0.1 test.saas.com

![20210607150737267.png][]

**第二步：验证是否配置成功**

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

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

![20210607150917742.png][]

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

第三步：关闭 host 检查

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

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

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

如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]

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

结束；

另外来个福利内容，本地配置 **nginx反向代理；**

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

1.下载nginx

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

下载后解压，解压后如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1][]

2.启动nginx

有很多种方法启动nginx

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

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

3.检查nginx是否启动成功

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

![20210607122937473.png][]

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

![5abf4dc629e19fe20e39013622a0560f.png][]

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 时，请求会跳转到我们配置的服务器

![8984e7ee9ee7c8f7668944aa5660b0fe.png][]

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

![72863a18be40b02fb0584a12fdce5f72.png][]

当服务器 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图片

![9348391d6c6b2d635c75cbc15b72673d.png][]

[20210607150737267.png]: /images/20221005/82fc20fbec754ab2b66553ec201aed74.png
[20210607150917742.png]: /images/20221005/5f4f8dcf55554757befcf477c1f63836.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: /images/20221005/fbb12fcb58fb4b9eaf8fec2f747b145d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1]: /images/20221005/13d468e94d8b486f95552ddcd9858fcd.png
[20210607122937473.png]: /images/20221005/2428082718be4bd488eb6d9c62b3bb52.png
[5abf4dc629e19fe20e39013622a0560f.png]: /images/20221005/e0e751c4038d471881e63c48ba698613.png
[8984e7ee9ee7c8f7668944aa5660b0fe.png]: /images/20221005/50384849aaa248cc8b03de169ca94720.png
[72863a18be40b02fb0584a12fdce5f72.png]: /images/20221005/43dbc31b00c0444db66e1a1909800726.png
[9348391d6c6b2d635c75cbc15b72673d.png]: /images/20221005/37de27e0bebb4eeaafe207e40cbcc0f1.png