场景

如需开发 H5 版本，本地调试会碰到跨域问题

解决方案

1. 使用 HbuilderX 内置浏览器预览。内置浏览器经过处理，不存在跨域问题。

2. 在 manifest.json 中配置，然后在封装的接口中判断 url

   我们通过 devServer.proxy 字段来设置代理。这里我们配置了一个代理规则，将以 /api 开头的请求代理到 http://api.example.com 目标服务器，并开启了跨域支持。我们还通过 pathRewrite 字段对请求路径进行了重写，去掉了路径中的 /api 前缀，从而使请求路径更加简洁。

   假设我们在项目中发起一个请求 /api/getData，它会被代理到 http://api.example.com/getData。这样，我们的前端代码就可以在不同域名下进行跨域请求了。

   // manifest.json
   {
     "h5": {
       "devServer": {
         "proxy": {
           "/api": {
             "target": "https://api.example.com",// 将请求代理到目标服务器
             "pathRewrite": {
               "^/api": "", // 重写请求路径，去掉请求路径中的/api前缀
             }
           }
         }
       }
     }
   }
   

   //判断当前是否生产环境
   let url = (process.env.NODE_ENV == 'production' ? baseUrl : '/api') + api;
   

3. 在 manifest.json 中配置，然后在封装的接口中判断 url

   // vue.config.js
   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'https://***.***.com',
           pathRewrite: {
             '^/api': ''
           }
         }
       }
     }
   };
   

   如果 2、3 方法同时使用，2 会覆盖 3。