uniapp real machine debugging app cannot access the interface

uniapp real machine debugging app cannot access the interface

When developing uniapp mobile applications, we often encounter the problem that the real machine debugging app cannot access the interface. This problem is often caused by cross-domain access. Here we will discuss how to deal with this problem.

1. Confirm whether the interface address is correct

When encountering the problem of being unable to access the interface, the first thing we need to confirm is whether the interface address is correct. It is very critical to confirm whether the interface address is correct. We need to carefully check the interface address to ensure that there is no problem with it.

2. Confirm whether the interface is cross-domain

If there is no problem with the interface address, the problem is likely to be cross-domain. It should be noted that due to security policy restrictions, browsers usually do not allow cross-domain access.

The default domain name of the front-end page is http://localhost:8080. If the domain name of the back-end interface is not under this domain name, it will cause cross-domain problems. For example, if the front-end page address is http://localhost:8080/index.html and the back-end interface address is http://api.demo.com/getData, cross-domain problems will occur at this time.

3. Configure the backend to allow cross-domain access to the front-end

In order to solve the cross-domain problem, we need to configure the backend to allow cross-domain access to the front-end. You can use the cross-domain middleware of the back-end framework for configuration. For example, Node.js can use the cors module, and Java can use the @CrossOrigin annotation of the Spring MVC framework.

Take Node.js as an example, install the cors module:

npm install cors --save

Use the cors module:

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors())

app.get('/getData', function (req, res) {
  // 返回数据
})

In the above code, we use the cors module for cross-domain configuration. Any cross-origin request can be allowed by calling the app.use(cors()) method.

4. Configure the manifest.json file of uniapp

In the uniapp application, we also need to configure the whitelist that allows cross-domain requests in the manifest.json file. Specifically, we need to add the following configuration to the manifest.json file:

{
  "mp-weixin": {
    "request": {
      "domainList": [
        "http://api.demo.com"
      ]
    }
  }
}

Among them, "http://api.demo.com" is the domain name of the back-end interface, which needs to be modified to the actual interface. domain name.

5. Other possible problems

If none of the above methods can solve the problem, then we need further investigation. Possible problems include:

• The network is unstable, causing the request to be interrupted;
• The backend interface returns an error code;
• The response time of the backend interface is too long;
• The server load is too high;
• etc.

Final summary:

When developing uniapp mobile applications, it is a common problem that the real machine debugging app cannot access the interface. Usually the cause of this problem is cross-domain access. We can solve this problem by configuring the backend to allow the front-end cross-domain access and configuring manifest.json in uniapp. At the same time, when you find a problem, you must patiently analyze the error message, find the specific cause and take corresponding solutions.

The above is the detailed content of uniapp real machine debugging app cannot access the interface. For more information, please follow other related articles on the PHP Chinese website!