So lösen Sie das Problem, dass die Vorschau des mobilen Uniapp-Browsers nicht auf die Benutzeroberfläche zugreifen kann

Bei der Verwendung von Uniapp zum Entwickeln von Anwendungen kommt es häufig vor, dass die Vorschau des mobilen Browsers nicht auf die Benutzeroberfläche zugreifen kann. Dies liegt an einigen Eigenschaften von Uniapp selbst. In diesem Artikel werden die Gründe, Lösungen usw. erläutert.

Problemphänomen

Wenn wir Uniapp zum Entwickeln von Anwendungen verwenden, zeigen wir das Projekt normalerweise in Echtzeit über den HBuilderX-Editor an, sodass wir den Schnittstelleneffekt leicht sehen und den Code debuggen können. Nach der Bereitstellung der Anwendung auf dem Server werden Sie jedoch beim Zugriff auf die Anwendung im mobilen Browser feststellen, dass die Seite normal angezeigt werden kann, beim Zugriff auf die Schnittstelle jedoch 404 oder andere Fehlermeldungen zurückgegeben werden.

Ursache des Problems

Während des Entwicklungsprozesses von Uni-app können Sie die Methode uni.request() verwenden, um Schnittstellenanfragen zu stellen. Diese Methode fügt automatisch https:/ hinzu. Als angeforderter Domänenname wird standardmäßig /unidemo.dcloud verwendet. Bei der lokalen Vorschau verwenden wir <code>localhost oder 127.0.0.1. Wenn Sie zu diesem Zeitpunkt in einem mobilen Browser auf die Schnittstelle zugreifen, unterscheidet sich der von der Schnittstelle angeforderte Domänenname vom Domänennamen der tatsächlichen Anwendung, was dazu führt, dass die Schnittstellenanforderung fehlschlägt. 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

Lösung

Option 1: Domänenübergreifend konfigurieren

Domänenübergreifende Anforderungen auf dem Server konfigurieren und Zugriff auf localhost oder 127.0.0.1ermöglichen > usw. Die Schnittstelle unter dem Domänennamen. Im Nginx-Server können wir dies durch die folgende Konfiguration erreichen:

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: Ändern Sie den Anforderungsdomänennamen

In der request-Methode von uniapp können Sie a hinzufügen Option baseURL , mit der der angeforderte Domänenname festgelegt wird. Wir können baseURL dynamisch festlegen, indem wir die laufende Umgebung beurteilen, um das Problem zu lösen, dass während der Vorschau kein Zugriff auf die Schnittstelle möglich ist. 🎜rrreee🎜Zusammenfassung🎜🎜Bei Verwendung von Uniapp für die Entwicklung kann der Unterschied zwischen dem angeforderten Domänennamen während der Vorschau und dem tatsächlich bereitgestellten Domänennamen dazu führen, dass die Schnittstellenanforderung fehlschlägt. Dieses Problem kann durch eine domänenübergreifende Konfiguration oder die dynamische Festlegung des angeforderten Domänennamens gelöst werden. 🎜

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die Vorschau des mobilen Uniapp-Browsers nicht auf die Benutzeroberfläche zugreifen kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!