Comment résoudre le problème selon lequel l'aperçu du navigateur mobile Uniapp ne peut pas accéder à l'interface

Lorsque vous utilisez Uniapp pour développer des applications, il arrive souvent que l'aperçu du navigateur mobile ne puisse pas accéder à l'interface. Cela est dû à certaines caractéristiques d'Uniapp lui-même. Cet article discutera des raisons, des solutions, etc.

Phénomène problématique

Lorsque nous utilisons uniapp pour développer des applications, nous prévisualisons généralement le projet en temps réel via l'éditeur HBuilderX, afin de pouvoir facilement visualiser l'effet d'interface et déboguer le code. Cependant, après avoir déployé l'application sur le serveur, lors de l'accès à l'application dans le navigateur mobile, vous constaterez que la page peut s'afficher normalement, mais 404 ou d'autres messages d'erreur sont renvoyés lors de l'accès à l'interface.

Cause du problème

Pendant le processus de développement d'Uni-app, vous pouvez utiliser la méthode uni.request() pour faire des requêtes d'interface. Cette méthode ajoutera automatiquement https:/. /unidemo.dcloud par défaut. net.cn est utilisé comme nom de domaine demandé, et lorsque nous prévisualisons localement, nous utilisons localhost ou 127.0.0.1. À l'heure actuelle, si vous accédez à l'interface dans un navigateur mobile, le nom de domaine demandé par l'interface est différent du nom de domaine de l'application réelle, ce qui entraîne l'échec de la demande d'interface. uni.request()方法进行接口请求，该方法默认会自动添加https://unidemo.dcloud.net.cn作为请求的域名，而我们在本地预览时，使用的是localhost或者127.0.0.1。此时，如果在手机浏览器中访问该接口，则接口请求的域名和实际应用所在的域名不同，导致接口请求失败。

解决方案

方案一：配置跨域

在服务端配置跨域请求，允许访问包括localhost或者127.0.0.1等域名下的接口。在Nginx服务器中，我们可以通过如下配置来实现：

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;
}

方案二：修改请求域名

在uniapp的request方法中，可以添加一个baseURL选项，用于设置请求的域名。我们可以通过判断运行环境来动态设置baseURL

Solution

Option 1 : Configurer les requêtes inter-domaines

Configurer les requêtes inter-domaines sur le serveur, permettant l'accès pour inclure localhost ou 127.0.0.1, etc. L'interface sous le nom de domaine. Dans le serveur Nginx, nous pouvons y parvenir grâce à la configuration suivante :

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,
    //...
})

Option 2 : Modifier le nom de domaine de la requête

Dans la méthode request d'uniapp, vous pouvez ajouter un Option baseURL , utilisée pour définir le nom de domaine demandé. Nous pouvons définir dynamiquement baseURL en jugeant l'environnement d'exécution pour résoudre le problème de l'impossibilité d'accéder à l'interface pendant la prévisualisation. 🎜rrreee🎜Résumé🎜🎜Lors de l'utilisation d'uniapp pour le développement, la différence entre le nom de domaine demandé lors de l'aperçu et le nom de domaine réellement déployé peut entraîner l'échec de la demande d'interface. Ce problème peut être résolu en configurant plusieurs domaines ou en définissant dynamiquement le nom de domaine demandé. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!