vue项目打包做app模拟真机测试 无法请求后台服务接口(axios配置)
vue项目打包做app模拟真机测试 无法请求后台服务接口背景:本地的测试使用的是反向代理,可以不用管目标地址问题,但是打包成apk测试却不可以,需要使用目标地址,而且在开发的代码中无法实现跨域,打包后是找不到接口的原本的写法://配置http.js文件import axios from 'axios'const instance = axios.create({timeout: 60000,hea
·
vue项目打包做app模拟真机测试 无法请求后台服务接口
背景:本地的测试使用的是反向代理,可以不用管目标地址问题,但是打包成apk测试却不可以,需要使用目标地址,而且在开发的代码中无法实现跨域,打包后是找不到接口的
原本的写法:
//配置http.js文件
import axios from 'axios'
const instance = axios.create({
timeout: 60000,
headers: {
'Content-Type': 'application/json'
}
})
export default instance
在不同的api.js文件下直接使用上面的instance,例如在userAPI中
这种方法在网页端打包是没有问题的,只需要在nginx 里配置下跨域就可以访问。但是在做app时这样是访问不到数据的,因为不存在跨域的说法,打包成app后实际访问的路径就是 /api/login ,这样会找不到接口,要采用绝对路径的方式,例如:http://192.168.1.111:9001/api/login,这样才能访问,不管你怎样配置管理你的请求api,前面的访问地址这个是必须要的。
现在需要把你自己项目需要访问的目标地址加在api的前面
但是这样很麻烦,因为你可能会有上百个接口,很多js文件,一个一个添加太麻烦了
这就需要你把你的axios的公共请求头加上你的访问地址:
//const baseUrl = '你的访问地址'; // 打包apk
const baseUrl = ''; // 本地测试
const instance = axios.create({
timeout: 60000,
headers: {
'Content-Type': 'application/json'
}
})
instance.defaults.baseURL = baseUrl;
以后如果是在本地测试,就把打包apk的那一行注释掉,如果要真机测试,就把那一行放开,把下面一行注释掉。
这是暂时想到的方法,有更好的办法再说吧
更多推荐
已为社区贡献2条内容
所有评论(0)