从零开始第一次开发App经验（基于HBuilder开发的混合App+SSM框架的JAVA后台）【二】

这一篇接上一篇基础，开始放项目，具体项目做的什么不细说，只放代码讲这个架构本身

项目架构看标题可以知道用的是客户端APP(Hbuilder混合app)+服务器JAVA后台（SSM框架），首先要解决的就是客户端和服务器的通信问题，说白了就是要解决跨域问题，这里的域指的是这样的一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域，即http://www.test.com/和http://www.test.com/login是同域，但是和https://www.test.com/(注意变成https)即是跨域，和http://www.test1.com/也是跨域，和http://www.test.com:8080/还是跨域，我们的app和服务器实际使用环境肯定跨域了，为什么跨域会有问题呢，因为js遵循同源规则，即不同域名下的js访问是不被允许的（安全考虑）。关于跨域就简单讲这么多。

这里先介绍一下，HBuilder是Dcloud公司的，我们调用手机底层功能（例如摄像头），是使用的他们封装好的5+Runtime，也就是上篇文章最后提到的HTML5+，另外还使用了mui框架，包含了css和js，和其他css、js文件一样直接引入就可以使用。

客户端和服务器的通信问题在mui里面就能找到答案，里面封装了mui.ajax，算是相对来说比较简单的一种方式，其他解决跨域问题的方法有：JSONP、CORS、html5+ XMLHttpRequest请求。其中前两种还受限于服务器的支持才能实现跨域。

这里我使用的是封装好的mui ajax。

                         第一个坑:mui ajax请求始终访问不到服务器

很遗憾，就在写这篇文章的时候，我想把问题重现，结果发现依然可以成功访问服务器，曾经在这个坑里呆了两天的我懵逼了。

先上项目代码，再描述问题：

java后台登录部分代码（Spring+SpringMVC+Mybatis）重点看注解部分:

@RequestMapping(value="/login")
public class LoginController {
  /**
   * 用户登录
   */
  @RequestMapping(value={"/login"},method = RequestMethod.POST,produces={"text/html;charset=UTF-8;","application/json;charset=UTF-8;"})
  @ResponseBody
  public String login(HttpServletRequest request) throws Exception{
  //具体代码
  ｝
｝

mui ajax部分代码：

mui.ajax({
      url:'http://'+ip_port+'/test/login/login',
      type:'POST',
      dataType:'json',
      data:{
        'username':usernameValue,
        'password':passwordValue
      },
      headers:{
        'appToken':'xxxxxxx'
      },
      //如果校验成功，跳转界面到主页
      success:function(resp){
        plus.nativeUI.closeWaiting();
        mui.toast(resp.msg);
      },
      //如果校验失败，提示密码错误
      error:function(xhr,type,errorThrown){
        console.info(errorThrown);
        mui.toast('账号或密码错误.或网络未连接.')
      }
    });

mui ajax，由于很多页面都有这个请求，而且服务器和测试用的ip地址不同，所以我把url里面的ip和端口摘出来单独放在一个js文件，一改全改。

因为是跨域访问，所以一直觉得是跨域的问题，在网上看了很多解决方案，比如：把

headers:{'Content-Type':'application/json'}

换成

headers:{'Content-Type':'application/x-www-form-urlencoded'}

还是不行，由于不知道是这儿出问题了还是后台端口代码设置的不对，服务器上的注解代码也是改了又改：

@RequestMapping(value={"/login"},method = RequestMethod.POST,produces={"text/html;charset=UTF-8;","application/json;charset=UTF-8;"})

还是不行，

用Postman（网页调试与发送网页HTTP请求的Chrome插件）一遍遍修改参数请求，不行。这时候已经一天半过去了，头发要薅没了。

也是突然的发现在调试模式的network中的，浏览器会在请求的url后面额外加一个“/”，然后我在自己sjax的url里面加上了“/”，成功了。网上也没有相同的例子，尤其是现在去掉“/”之后也可以成功和服务器通信。这个困扰了两天的坑虽然跳过去了，但是现在并没有让人太愉快。

又继续研究了“一次完整的HTTP请求过程”，并没有找到答案。这个坑以后补。

另外如果有兴趣一起进步学习，请搜索名称关注我的公众号：IT成长日记
或扫码：