uni-app开发环境跨域问题

在使用uni-app开发H5或开发App但是要使用H5调试时，都会需要跨域问题，主要有四种解决方案：HBuilderX内置浏览器、webpack代理、浏览器插件、本地mock-api。下面是我的实际测试的结果：

前三种在官方文档中有介绍：uni-app H5跨域问题解决方案（CORS、Cross-Origin） - DCloud问答

HBuilderX内置浏览器（渲染效果太差）

渲染效果实在太差，放弃。

webpack代理（无效）

按照文档中的说明，结合我在网上搜索的资料，在根本下创建了 vue.config.js 文件，并做了以下配置：

module.exports = {
  devServer: {
    proxy: {
      "/Api": {
        target: process.env.VUE_APP_BASE_URL,
        secure: false,
        changeOrigin: true,
      },
    },
  },
};

但是不起作用，Google之后，说配置了代理后，请求时刚不能加域名，要以 /Api 开着，可是我将请求中的域名去掉之后，也依然不起作用。

浏览器插件（有效）

最终还是装浏览器插件有用，但是要在服务器端的返回头中增加header信息，以PHP为例：

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");
}

关于插件

插件名

Access-Control-Allow-Origin

插件安装方式

• 打开Chrome应用商店，搜索插件名安装（需科学上网）
• 使用Edge浏览器，打开Edge插件市场：Microsoft Edge 加载项，搜索插件名安装（无需科学上网）
• 使用uni-app官网提供的zip压缩包离线安装

插件使用方式

红框是开关，蓝框是设置页面。

另外，我试过之后发现，需要在设置页面中将选项Access-Control-Allow-Headers打上勾才可以：

本地mock-api（有效）

前端开发时经常会使用mock的方式来模拟后端接口，mock-api就是一个可以完成此功能的不错的库，而且这个库已经做了跨域处理。

• 在本地全局安装mock-api
• 建议单独创建一个存放所有mock-api的项目，方便管理
• 项目目录创建一个js文件（不推荐json），根据接口出参在此js文件中编写mock用例，例如：

   // 使用js格式，则可以引入其它库
  const moment = require("moment");
  const Chance = require("chance");
  chance = new Chance();
  
  module.exports = [
    /*
    获取令牌
    入参：
    {
      appId: appIdString,
      appSecret: appSecretString,
    }
     */
    {
      method: "post",
      url: "/Api/token",
      response: function () {
        return {
          code: "0",
          desc: "success",
          data: {
            token: moment().,
            expireTime: moment().unix() + 7200,
          },
        };
      },
    },
    ...
  ];
  

• 启动mock-api 执行

  mock-api serve 刚才创建的mock-api项目名
  

• 在项目中将请求域名更改为：http://localhost:10086