uni - app踩坑：编译H5解决浏览器跨域问题

uniapp编译到app是不存在跨域问题的，但是编译到H5就会有跨域问题。记录一下工作中遇到跨域及解决跨域方法

方法一：直接编译Hbuilder内置浏览器，能解决跨域，但是内置浏览器调试没有谷歌爽

方法二：在manifest.json文件中配置跨域，该方法类似vue.config.js中的devServer

步骤一 实例

步骤一 代码

"h5" : {
    "devServer" : {
        "disableHostCheck" : true, // 开启可以用自己的域名
        "proxy": {
          "/api": {
            "target": "https://www.test.com",
            "changeOrigin" : true,
            "secure" : false,
            "pathRewrite": { //匹配请求路径里面有 /api 会替换成https://www.test.com
            // 举例：/api/api/user => https://www.test.com/api/user
              "^/api": ""
            }
          }
        }
    }
}

步骤二 实例

步骤二 代码

就是接口请求的时候，域名要改为/api，不能是正式域名，因为pathReweite已经帮你转了
举个栗子
baseUrl = process.env.NODE_ENV === 'development' ? '/api' : 'https://www.test.com'
然后uni.request请求的url应该是这样：baseUrl + '/user/info'

然后浏览器看到的请求地址应该是
http://localhost:8080/user/info

方法三 ：直接在项目根目录创建一个vue.config.js文件，配置跟方法二一样

注意vueVersion版本为3的才管用也就是Vue版本为3的才行

该方法跟2一样的，uniapp会识别这个vue.config.js文件，不过manifest.json的优先级
要高于vue.config.js文件

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://www.baidu.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
  }}