[WeChat applet｜Debug] Solve the problem that the real machine preview of WeChat applet cannot access the localhost:8080 port on the PC side

foreword

Hello! Buddy!
Thank you very much for reading Haihong's article. If there are mistakes in the text, you are welcome to point out ~
 
self-introduction ଘ(੭ˊᵕˋ)੭
Nickname: Haihong
Label: Programmer | C++ Player | Student
Profile: I got acquainted with programming in C language, and then transferred to Entered the computer science major, and was fortunate to have won some national awards and provincial awards... Has been guaranteed.
Learning experience: solid foundation + more notes + more typing + more thinking + learning English well!
 
The articles in the Xiaobai stage
are only used as their own study notes for the establishment and review of the knowledge system
.

Problem Description

Scenario: java backend + WeChat applet

When testing, use localhost:8080 for testing

 wx.request({
    
    
        url: 'http://localhost:8080/*******', //仅为示例，并非真实的接口地址
        method: "POST",
        timeout: 0,
        data: {
    
    
        },
        header: {
    
    
          "Content-Type": "application/json",
        },
        success(res) {
    
    
          console.log(res.data)
          } else {
    
    
            console.log(res.data.error)
          }
        },
        fail(res) {
    
    
          console.error(res);
        }
      })

The back-end interface can be accessed correctly on the PC side, but the data on the computer side cannot be accessed when using the real machine preview

Solution

step 1

Make sure your computer and phone are in the same local area network

What is used here is: open the hotspot of the mobile phone, and connect the computer to the hotspot of the mobile phone

Step 2

view ip address

The method on the mac side is as follows:

Step 3

Modify localhost to the ip address just now on the applet side (take the ip address as 1.2.3.4 as an example)

hint:

You can test it by entering ip:8080 in the browser before

The following interface appears indicating that it is successful

Step 4

Click the preview in the applet development tool, you can use the real machine to preview, and you can also access the back-end interface of the computer.

Epilogue

The article is only used as a study note, recording a process from 0 to 1

I hope it can help you a little bit, if there are any mistakes, please correct me