解决uni-app在开发环境中H5端的跨域问题

最近在做项目的时候遇到了一个小问题。

在开发阶段用uni-app开发H5页面时，在chrome浏览器预览页面，发现数据无法传到后台去，存在跨域问题，但用uniapp内置浏览器就可以访问后台。

找了很多资料，发现原来是前端的跨域问题，与uniapp和后端无关。

网上贴了很多解决方案，但可能表达得不够全面，所以试了很久都不行。后来我集百家之所长，终于解决了问题（感谢各位大佬）。现在整合后记录下来，仅供自己备忘和学习交流用。

以登录为例进行说明：

修改前（这段简单说明情况，粗略带过）：

前端代码
（把用户名和密码以json的形式传到后台）

（点击登录后，弹出以下错误，这个错误简而言之就是跨域问题）

后端代码：
（用输出用户名来测试后台有没收到前端传过来得数据）