How to solve the problem that the uniapp mobile browser preview cannot access the interface

When using uniapp to develop applications, it often happens that the mobile browser preview cannot access the interface. This is due to some characteristics of uniapp itself. This article will discuss the reasons, solutions, etc.

Problem phenomenon

When using uniapp to develop applications, we usually preview the project in real time through the HBuilderX editor, so that we can easily view the interface effects and debug the code. However, after deploying the application to the server, when accessing the application in the mobile browser, you will find that the page can be displayed normally, but 404 or other error messages are returned when accessing the interface.

Cause of the problem

During the development process of Uni-app, you can use the uni.request() method to make interface requests. This method will automatically add https by default. ://unidemo.dcloud.net.cn is used as the requested domain name, and when we preview locally, we use localhost or 127.0.0.1. At this time, if you access the interface in a mobile browser, the domain name requested by the interface is different from the domain name of the actual application, causing the interface request to fail.

Solution

Option 1: Configure cross-domain

Configure cross-domain requests on the server, allowing access to include localhost or 127.0. Interfaces under domain names such as 0.1. In the Nginx server, we can achieve this through the following configuration:

location / {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, HEAD';
    add_header Access-Control-Allow-Headers 'Authorization, X-Requested-With, Content-Type, Accept';
    proxy_pass http://your_domain:your_port;
}

Option 2: Modify the request domain name

In the request method of uniapp, you can add a baseURL option, used to set the requested domain name. We can dynamically set baseURL by judging the running environment to solve the problem of not being able to access the interface during preview.

let baseURL = '';
if(process.env.NODE_ENV === 'development'){
    baseURL = 'http://localhost:3000';
}else{
    baseURL = 'http://your_domain:your_port';
}
uni.request({
    url: '/api',
    method: 'POST',
    baseURL: baseURL,
    //...
})

Summary

When using uniapp for development, the difference between the requested domain name during preview and the actual deployed domain name may cause the interface request to fail. This problem can be solved by configuring cross-domain or dynamically setting the requested domain name.

The above is the detailed content of How to solve the problem that the uniapp mobile browser preview cannot access the interface. For more information, please follow other related articles on the PHP Chinese website!