uni-app的h5/小程序/app 网络请求，解决本地环境和生产环境网络请求问题

多思考多学习

已于 2022-04-11 17:33:35 修改

阅读量1.1w

点赞数 6

分类专栏： vue uni-app 文章标签： uni-app

于 2022-04-11 16:06:46 首次发布

本文链接：https://blog.csdn.net/weixin_45753961/article/details/124101461

版权

本文主要介绍uni-app在h5、小程序和app三端如何处理本地和生产环境的网络请求问题。针对h5的跨域需求，需在manifest.json设置反向代理，而小程序和app则不需要。小程序需使用https域名，并在本地开发时开启不校验合法域名的设置。app的请求同样无需api前缀。文章提供了request.js的完整代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇的重点在于解决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

最低0.47元/天解锁文章