uniapp 创建 跨域、封装请求、区分环境_uniapp api 跨域 配置

场景：需要一个H5页面去写支付界面，由于js太不好用了，所以利用uniapp搭建一个简单的平台。

1. 首先使用Hbuilder，创建一个uniapp的H5项目

 ps：点击对应的uniapp项目框架时，需要注意自己本次开发所需要使用哪种语言（VUE2/VUE3）
1

2. 建立跨域 — proxy

 在manifest.json —> 源码视图加入以下代码完成跨域
1

/* H5配置 */
    "h5" : {
        "title" : "yubai",
        "devServer" : {
         // "https" : false, // 是否启用 https 协议，默认false
            "port" : 9999,
            "disableHostCheck" : true,
            "proxy" : {
                "/" : {
                   "target": "http://172.XXX.1.220:8080/", // 目标地址
                   "changeOrigin" : false, //changeOrigin 这个配置项，修改的不是origin 头，而是 host 头，默认false
                   "secure": true, // 是否支持https协议的代理
                   "pathRewrite" : {
                        "^/" : "/"
                    }
                }
            }
        }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 封装api方法，注册全局 — $request

• 创建 requset.js文件

import configObj from '../config.js'
//#ifdef H5
const BASE_URL = ''
// #endif
// #ifdef APP
const BASE_URL = configObj.baseUrl
// #endif
const request = ({
    url = '',
    method,
    header = {},
    data = {},
    showLoading =true
  })=>{
    return new Promise((resolve,reject)=>{
      uni.request({
        url: BASE_URL +url,// 接口地址 链接+接口路径
        method,
        header : { // 添加请求头
          // "Authorization": "bearer " + uni.getStorageSync('Authorization').access_token,
        },
        data,// 传递参数
        success:(res)=>{
          console.log(res)
          if(res.data.code === 200){ // 可以根据状态码进行对应的拦截
            resolve(res.data)
          }else{
            if(res.statusCode ==502||JSON.parse((res.data).msg == '')){
              reject(JSON.parse(res.data))
            }else{
              reject(JSON.parse(res.data))
            }
          }
        },
        // 这里的接口请求，如果出现问题就输出接口请求失败的msg；对于请求失败的设置统一抛错提示了
        fail: (err) => {
          uni.showToast({
            title: "XXX" + err.msg,
            icon: 'none'
          });
          reject(err)  
          }
      })
    })
  }
  export default request
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

• 在main.js文件中，引入注册挂载 $request

import request from './utils/request.js'
Vue.prototype.$request = request // vue文件调用时,指令  this.$request
1
2

调用接口请求注意，封装的返回值时promise数值，需要做对应的处理—async /await

method:{
   async getAPI(){
       try{
         const res = await this.$request({
           url :'/XXXX',
           method:'get',
           data:{ id:10086}
        })
        console.log(res)
      }catch(e){
      console.log(e)
   }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4. 本地运行、打包 — 区分对应环境config，并注册全局

创建package.json文件

{
    "uni-app": {
        "scripts": {
            "build:test": { // 测试环境打包运行
                "title": "build:test",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "NODE_ENV": "development",
                    "BASE_URL": "test",
                    "DESCRIBE": "测试环境"
                }
            },
            "build:pro": {
                "title": "build:pro",// 正式环境打包运行
                "env": {
                    "UNI_PLATFORM": "h5",
                    "NODE_ENV": "production",
                    "BASE_URL": "pro",
                    "DESCRIBE": "正式环境"
                }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• 创建config.js 使用自定义变量

** process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。
const node_dev = process.env.NODE_ENV
// 开发环境配置
let configObj = {
  baseUrl:"/good"
}
if(node_dev){ // 如果存在则是打包上线状态，否则 就是本地环境运行
  // 打包环境配置
  configObj = {
    baseUrl:process.env.BASE_URL
  }
}
export default configObj
1
2
3
4
5
6
7
8
9
10
11
12
13

• 在main.js文件中，引入注册挂载 *$configObj *

import configObj from './config.js'
Vue.prototype.$configObj = configObj
1
2

ps: 设置跨域等之后，记得重启编辑器再运行代码！！！