UniApp H5 跨域代理配置并使用（配置manifest.json、vue.config.js）

• UniApp 运行到浏览器的时候，接口会跨域报错，这里通过两种方式解决，二选一即可。

• 修改或调整配置文件后，推荐重新运行，以防不生效。

• 配置完成后，请求接口显示 Please enable JavaScript to continue. 的话，可以试试重启编辑器（尤其是 HBuilderX），再重新运行项目，如果还是不行就另外查查解决方案吧，网上有很多。

一、方式一：修改 manifest.json 文件

• 在 UniApp 也有类似配置的地方：找到 manifest.json -》源码视图，添加 h5 配置项：

  "h5" : {
      "devServer" : {
          "disableHostCheck" : true,
          "proxy" : {
              "/api" : {
                  "target" : "http://www.dzm.com",
                  "changeOrigin" : true,
                  "secure" : false,
                  "ws": false,
                  "pathRewrite" : {
                      "^/api" : ""
                  }
              }
          }
      }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

  

二、方式二：添加 vue.config.js 文件

• UniApp 会识别 vue.config.js 文件，但是 manifest.json 的优先级
  要高于 vue.config.js 文件，所以看需求选择一个配置即可。

• 像 vue 开发一样，手动创建一个 vue.config.js 文件，然后添加上代理，vue.config.js 只能创建在项目的根目录，不然会无法识别到。

  module.exports = {
      devServer: {
          disableHostCheck: true,
          proxy: {
              '/api': {
                  target: 'http://www.dzm.com',
                  changeOrigin: true,
                  secure: false,
                  ws: false,
                  pathRewrite: {
                      '^/api': ''
                  }
              }
          }
      }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

三、使用

• 简单使用

  // 请求对象
  uni.request({
      url: '/api' + '/mobile/user/userinfo',
      method: 'GET',
      data: {},
      header: {
          'X-Token': uni.getStorageSync('token')
      },
      success: (res) => {
          // 请求成功
          console.log(res)
      },
      fail: (err) => {
          // 请求失败
          console.log(err)
      }
  })
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

• 封装成请求对象 request.js

  // 接口域名
  // #ifdef H5
  const BaseHost = '/api'
  // #endif
  // #ifndef H5
  const BaseHost = 'http://www.dzm.com'
  // #endif
  // 请求封装
  export default function ({
      // 请求域名
      host = BaseHost,
      // 请求地址
      url,
      // 请求方式
      method,
      // 请求数据
      data = {},
      // 请求头
      header = {}
  }) {
      // 官方请求文档（可查阅传参）https://uniapp.dcloud.io/api/request/request.html
      // 转为 Promise 结构
      return new Promise((resolve, reject) => {
          // 请求对象
          uni.request({
              url: host + url,
              method,
              data,
              header: Object.assign({
                  // 默认请求头
                  'X-Token': uni.getStorageSync('token')
              }, header),
              success: (res) => {
                  // 可以在这里进行成功的公共处理
                  resolve(res)
              },
              fail: (err) => {
                  // 可以在这里进行失败的公共处理
                  reject(err)
              }
          })
      })
  }
  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