uniapp手机浏览器预览访问不到接口怎么解决-uni-app-PHP中文网

uniapp手机浏览器预览访问不到接口怎么解决

PHPz

发布： 2023-04-17 11:30:26

原创

3242人浏览过

在使用uniapp开发应用时，经常会出现手机浏览器预览访问不到接口的情况，这是由于uniapp本身的一些特性所导致的。本文将从原因、解决方案等方面进行讨论。

问题现象

在使用uniapp开发应用时，我们通常是通过HBuilderX编辑器对项目进行实时预览，这样我们可以很方便地查看界面效果和调试代码。但是在将应用部署到服务器上之后，在手机浏览器中访问应用时，会发现页面能够正常显示，但是访问接口时却返回了404或者其他错误信息。

问题原因

Uni-app在开发过程中，可以使用uni.request()方法进行接口请求，该方法默认会自动添加https://unidemo.dcloud.net.cn作为请求的域名，而我们在本地预览时，使用的是localhost或者127.0.0.1。此时，如果在手机浏览器中访问该接口，则接口请求的域名和实际应用所在的域名不同，导致接口请求失败。

解决方案

方案一：配置跨域

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

一览AI绘图

一览AI绘图是一览科技推出的AIGC作图工具，用AI灵感助力，轻松创作高品质图片

查看详情

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，以解决预览时访问不到接口的问题。

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

登录后复制

总结

在使用uniapp进行开发时，预览期间的请求域名和实际部署的域名不同可能会导致接口请求失败的问题。可以通过配置跨域或者动态设置请求域名的方式来解决该问题。

以上就是uniapp手机浏览器预览访问不到接口怎么解决的详细内容，更多请关注php中文网其它相关文章！