Application Scenario

(Mobile application domain name requests local area network pc local service) Due to the use of dcloud wap2app, m station is changed to app, wap2app specifies the back-end domain name and resolves it to appid, the request address cannot be changed, and functions such as sharing can only be tested on the mobile phone, build a test The environment is complex, so I want to map the app request domain name proxy to the PC-side background service in the LAN, and I started to implement this idea.

implement ideas

The PC side can use the hosts file to specify the domain name mapping. The mobile phone side cannot modify the hosts, but we can set up a proxy to allow the phone’s network to be accessed through the PC computer side. At this time, the computer is configuring hosts to map the service domain name requested by the app application to the PC computer. on the IP address of the service.

hosts description

To put it simply and clearly, the domain name you requested will first go to the hosts configuration to see if there is a match, and use it directly. Did not search in dns again (if hosts is set and does not take effect, please clean up browser dns cache and local dns cache cmd -> ipconfig /flushdns)

PC now fiddler realizes the monitoring of the port

insert image description here
At this point we will listen to port 8888 for traffic forwarding

Phone Settings Proxy

insert image description here
First of all, make sure that the mobile phone and computer are in the same local area network.
The proxy server address is the IP address of the PC computer. Cmd ipconfig checks
the proxy service address. This address is the listening port set by the PC in the previous step.

hosts configuration mapping

Modify and add mappings to the hosts file under C:\Windows\System32\drivers\etc You
insert image description here
can also use switchhosts to configure, download switchhosts as an open source application. Remember to run with administrator privileges

Now mobile can access

access process

The mobile application sends a request to test.com.cn to the proxy server at port 192.168.46.184:8888. The proxy server forwards the request to test.com.cn to the hosts file to search for test.com.cn corresponding to the local machine 192.168.46.184 (default 80 if no port is written, hosts It is not tender to fill in the port, so my local service starts port 80) Well, this is the process

Problems encountered in use

1. Turn off the proxy on the mobile phone network, open the app normally, open the proxy the next day, visit the page because there is no change in the backend address because of the Vue request, it is found that the mobile app has cached the page and the request is still the address of the server, uninstall the app and reinstall it.
2. Front-end and back-end cross-domain problems, because the front-end address domain name of the intercepted app request is included in app.com.cn/appweb request background address is 192.168.46.184:8080/app is not the same domain name, so it will lead to cross-domain, at this time we can Put the background and front-end domain name configurations into the front-end app.com.cn/appweb background configuration app.com.cn/app
so that it will not be cross-domain, we forward the domain name configured before switchhost to the local, and then use the nginx path Act as an agent

 		 listen 80;
        server_name app.com.cn ;
        location /app {//后台服务代理
            proxy_pass   http://192.168.46.184:8080;//后台服务地址
        }
        location /appweb{//页面服务代理
            proxy_pass   http://192.168.46.184:8081;//前台服务地址
        }

Special thanks

Thank you Brother Cai for your suggestions during the implementation process, and thank you for watching.

The proxy app requests the address to access the local service (a local server in the same LAN) to facilitate testing the app

Write custom directory title here