本篇的重点在于解决h5/小程序/app这三端在本地和生产环境的网络请求问题
全部代码贴在了全文最后
思路：
首先要理解这三个端的特性，h5会有跨域问题需要反向代理，小程序和app不需要反向代理，同时小程序还得用https域名。
一、h5，
一般会跨域需要反向代理。所以要在mainifest.json设置反向代理。在请求接口时，还得拼个/api前缀
// 配置代理
"devServer" : {
"proxy" : {
"/api" : {
"target" : "http://192.168.1.193:8999",
"changeOrigin" : true, //是否跨域
"secure" : false, // 设置支持https协议的代理
"pathRewrite" : {
"^/api" : ""
}
}
}
}
let url ='/api/system/login'
本地调试是loacalhost:808几，
正式环境的话，会变成ip或域名前缀+/api/system/login，后端需要配置一下nginx代理，将api替换一下
二、小程序
不需要反向代理，直接请求。所以请求接口不需要拼api前缀。
但需要https域名，所以本地环境测试时开启‘不校验合法域名……’
1.在微信开发者工具，点击详情>本地设置
2.开启‘不校验合法域名……’
在微信公众平台https://mp.weixin.qq.com/ ，扫码登录小程序，点击开发>开发管理，找到服务器域名，
// #ifdef MP
if (process.env.NODE_ENV === 'development') {
BASE_URL = "http://192.168.1.193:8999"
} else {
BASE_URL = "https://www.baidu.com"
}
// #endif
小程序本地环境，request网络请求地址是后台服务地址，接口不要/api前缀
let url = BASE_URL + '/system/login'
小程序生产环境，request网络请求地址要https://域名，并且要api前缀，因为域名一般对应的是前端页面，域名+api后缀，api经过了后端nginx替换，就表示是后端服务地址
let url = BASE_URL + '/api/system/login'
拓展：如果要修改 request 合法域名
注意：
① 域名只支持 https 协议
② 域名不能使用 IP 地址或 localhost
③ 域名必须经过 ICP 备案
④ 服务器域名一个月内最多可申请 5 次修改
三、app
不需要反向代理，直接请求。所以请求接口不需要拼api前缀
// #ifdef APP-PLUS
BASE_URL = "http://192.168.1.193:8999"
// #endif
let url = BASE_URL + '/system/login'
request.js全部代码：
import $common from './common.js';//vuex
// import $store from '../store/index.js';//vuex
// 全局请求路径，也就是后端的请求基准路径
let BASE_URL = ""
// #ifdef H5
BASE_URL = process.env.BASE_API
// #endif
// #ifdef APP-PLUS
BASE_URL = "http://192.168.1.193:8999"
// #endif
// #ifdef MP
if (process.env.NODE_ENV === 'development') {
BASE_URL = "http://192.168.1.193:8999"
} else {
BASE_URL = "https://www.baidu.com"
}
// #endif
const request = (options = {}) => {
options.url = !BASE_URL ? options.url : (BASE_URL + options.url)
options.header = options.headers
options.data = options.data
options['sslVerify'] = false
let TOKEN = $common.getStorage("token") //TOKEN
if (TOKEN) {
if (options.headers) {
options.headers['Authorization'] = TOKEN;
} else {
options.headers = {
"Content-type": "application/json;charset=utf-8",
},
options.headers['Authorization'] = TOKEN;
options.header = options.headers
}
}
return new Promise((resolve, reject) => {
console.log("options", options);
options.success = function (res) {
console.log("res", res);
let code = res.data.code;
uni.hideLoading();
if (code != 200) {
if (['401', 'B0005', 'A0076'].indexOf(code) != -1) {
//清空token
uni.removeStorageSync("token");
uni.removeStorageSync("sysUser");
uni.showToast({
title: '登陆失效',
duration: 2000,
icon: 'none',
});
}
}
//系统异常
if (code == "B0001") {
uni.showToast({
title: '请求失败，请稍后重试',
duration: 2000,
icon: 'none',
});
return;
}
resolve(res)
}
options.fail = function (err) {
console.log("err", err);
uni.hideLoading();
reject(err)
}
uni.request(options)
})
}
export default request
