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中
userAPI.js,user是JSON对象
这种方法在网页端打包是没有问题的,只需要在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的那一行注释掉,如果要真机测试,就把那一行放开,把下面一行注释掉。
这是暂时想到的方法,有更好的办法再说吧

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐