uniapp 모바일 브라우저 미리보기가 인터페이스에 접근할 수 없는 문제를 해결하는 방법

유니앱을 사용하여 애플리케이션을 개발할 때, 모바일 브라우저 미리보기에서 인터페이스에 접근할 수 없는 경우가 종종 있습니다. 이는 유니앱 자체의 일부 특성 때문입니다. 이 기사에서는 원인, 해결 방법 등에 대해 설명합니다.

문제 현상

uniapp을 사용하여 애플리케이션을 개발할 때, 우리는 보통 HBuilderX 에디터를 통해 프로젝트를 실시간으로 미리보기하여 인터페이스 효과를 쉽게 보고 코드를 디버깅할 수 있습니다. 하지만, 애플리케이션을 서버에 배포한 후, 모바일 브라우저에서 애플리케이션에 접근하면 페이지는 정상적으로 표시되지만, 인터페이스에 접근하면 404 또는 기타 오류 메시지가 반환되는 것을 볼 수 있습니다.

문제 원인

Uni-app 개발 과정에서 uni.request() 메소드를 사용하여 인터페이스 요청을 할 수 있습니다. 이 메소드는 자동으로 https:/를 추가합니다. /unidemo.dcloud는 기본적으로 요청된 도메인 이름으로 net.cn을 사용하며, 로컬에서 미리 볼 때는 localhost 또는 127.0.0.1을 사용합니다. 이때, 모바일 브라우저에서 인터페이스에 접속할 경우, 인터페이스에서 요청한 도메인네임이 실제 애플리케이션의 도메인네임과 달라 인터페이스 요청이 실패하는 원인이 됩니다. 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

해결책

옵션 1: 교차 도메인 구성

서버에서 교차 도메인 요청을 구성하여 localhost 또는 127.0.0.1를 포함하는 액세스를 허용합니다. > 등 도메인 이름 아래의 인터페이스입니다. Nginx 서버에서는 다음 구성을 통해 이를 달성할 수 있습니다:

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

옵션 2: 요청 도메인 이름 수정

uniapp의 request 메소드에서 baseURL 옵션, 요청된 도메인 이름을 설정하는 데 사용됩니다. 미리보기 도중 인터페이스에 접근할 수 없는 문제를 해결하기 위해 실행 환경을 판단하여 baseURL을 동적으로 설정할 수 있습니다. 🎜rrreee🎜요약🎜🎜uniapp을 사용하여 개발하는 경우 미리보기 시 요청한 도메인 이름과 실제 배포된 도메인 이름이 달라서 인터페이스 요청이 실패할 수 있습니다. 이 문제는 교차 도메인을 구성하거나 요청된 도메인 이름을 동적으로 설정하여 해결할 수 있습니다. 🎜

위 내용은 uniapp 모바일 브라우저 미리보기가 인터페이스에 접근할 수 없는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!