The introduction

In the development of enterprises in the sidebar WeChat self-built application function, usually thinking about how can I like use the developer tools in local debugging page, if you look carefully will find, in fact is the sidebar is the enterprise WeChat a browser to access specific address, so you can put the path of the sidebar configuration cost to IP and port, The local application can be accessed when the enterprise wechat is opened.

When landing, however, is authorized the callback address will the legitimacy of the enterprise WeChat tested, so although the above methods can open our native applications, but there was no way authorized, although also could land through simulation methods to bypass, but the manual way of trouble, and prone to errors, so we have the following methods:

Charles 、Fiddler

This is another simple way I found in digging gold, details jump: enterprise wechat self-built application sidebar configuration for the local environment

Nginx reverse proxy

In fact, the principle is similar to the above scheme, which is to change the host to transfer the domain name request to the local machine, and then forward the request to the IP and port when the application starts through the reverse proxy, so as to cheat the enterprise wechat domain name verification and achieve the purpose of local debugging.

The specific operation steps are as follows:

  1. First of all, we need a quick modification of the local machine sub-host configuration software, here is recommended
  • Mac – iHosts
  • The Window – SwitchHosts

After installation, configure the legitimate callback address of the enterprise wechat sidebar in the host file according to the use mode of the software, and then point to the host. Assuming the valid address is test.wxworksidebar.com, add a line to the host file:

127.0.0.1 test.wxworksidebar.com
Copy the code

127.0.0.1 can also be replaced by the IP address of the network where the local host resides.

  1. Nginx installation and configuration

Nginx installation is relatively difficult, here is the Mac and Windows respectively:

Mac

  1. Install HomeBrew first, preferably using a frictionless network.
  2. After the installation is complete, execute the command to install Nginx:brew install nginx.
  3. After Nginx installation is complete, use HomeBrew to start Nginx:brew services start nginx.
  4. Open a browserlocalhost:8080If the Nginx welcome page is displayed normally, it indicates that Nginx has been successfully installed and started.

Window

Windows Nginx is quite magical, generally not easy to use and management, here recommend an integrated software nginxWebUI, recommended to use the way of Docker to install.

  1. Configure Nginx

For the front end, it is quite difficult to understand the Nginx configuration in a short time. It is recommended to use the Nginx webui management background to generate the desired Nginx configuration code.

The nginxWebUI has a Demo. The user name and password are admin. After logging in to the nginxWebUI, choose the direction proxy menu:

Add direction proxy:

Click the preview button in the list to view the Nginx configuration you just added:

Copy the configuration of the code above, then paste it to the local Nginx configuration file, Mac Nginx configuration in/opt/homebrew/etc/Nginx/Nginx. Conf

#user nobody;

worker_processes 1;

  

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

  

# pid logs/nginx.pid;

  
  

events {

worker_connections 1024;

}

  
  

http {

include mime.types;

default_type application/octet-stream;

  

#log_format main '$remote_addr - $remote_user [$time_local] "$request" '

# '$status $body_bytes_sent "$http_referer" '

# '"$http_user_agent" "$http_x_forwarded_for"';

  

#access_log logs/access.log main;

  

sendfile on;

#tcp_nopush on;

 

#keepalive_timeout 0;

keepalive_timeout 65;

#gzip on;

server {
    listen 8080;
    server_name localhost;
    #charset koi8-r;
    #access_log logs/host.access.log main;
    location / {
        root html;
        index index.html index.htm;
    }
    #error_page 404 /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }  
    #...
}

Here is the newly added codeserver { server_name test.wxworksidebar.com; listen 80; The location / {proxy_pass http://192.168.0.170:8090/; proxy_set_header Host$host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header X-Forwarded-Port $server_port;
        proxy_set_header X-Forwarded-Proto $scheme; }}#...

include servers/*;

}
Copy the code

Restart Nginx for local development debugging.