uniapp发布为h5调用不了接口如何办
更新时间：2023-08-15
前言:
在使用uniapp开发项目并发布为H5之后，有时会出现无法调用接口的情况。这个问题通常是由于跨域请求引起的。本文将介绍如何解决uniapp发布为H5后无法调用接口的问题。
一、 设置跨域请求
解决跨域请求的一种方式是在服务端配置跨域请求头信息。如下所示，可以在服务端的response头信息中添加Access-Control-Allow-Origin，允许指定来源的请求访问：
```
// 服务端配置
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET');
```
这样设置之后，访问接口时就可以跨域请求，并正常获取数据。
二、使用代理
另一种解决方法是使用代理来转发请求。在uniapp项目的根目录下的vue.config.js文件中添加以下配置：
```
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
这个配置表示将以"/api"开头的请求转发到"http://api.example.com"，并且在请求头中设置changeOrigin为true，实现跨域请求。
三、允许安全域名
uniapp发布为H5后，还需注意是否设置了安全域名，在HBuilderX中，需要在manifest.json文件中的"H5Plus"字段中添加允许访问接口的地址。如下所示：
```
{
"plus": {
"domain": [
"api.example.com"
]
}
}
```
这样设置之后，H5页面就可以正常访问指定域名的接口了。
总结:
在uniapp发布为H5后无法调用接口的问题中，我们提供了三种解决方法。第一种是在服务端配置跨域请求头信息，第二种是使用代理转发请求，第三种是设置安全域名。根据实际情况选择合适的解决方法，可以解决这个问题。希望以上内容对您有帮助！
