Vue 跨域前后端处理，mock 导致requestBody接收不到

1.Vue 前端跨域配置，开发调试阶段推荐这样使用！

  devServer: {
    proxy: { // 配置跨域
      '/api': {
        target: 'http://localhost/Apis', // 这里后台的地址模拟的;应该填写你们真实的后台接口
        changOrigin: true, // 允许跨域
        pathRewrite: {
          /* 
            我们使用的时候，比如login请求：/api/login

            重写路径，当我们在浏览器中看到请求的地址为
            http://localhost:9528/api/login 时
            实际上访问的地址是：
            http://localhost/Apis/login, 记得通过'^/api': '' 把/api去掉，不然实际请求会多出一个/api,会变成http://localhost/Apis/api/login
            
            如何验证？：使用工具访问 http://localhost:8080/api/core/getData/userInfo
           */
          '^/api': ''
        }
      }
    }
  },

2.通过Vue 解决前端跨域问题，但是 post请求接收不到 requestBody？

在调试请求时，先用工具调试。如idea 自带的REST Client

后端接收到请求，提示：

Unexpected character ('t' (code 116)): was expecting double-quote to start field name

后面发现是发送的请求的key值不带冒号，所以有如下两种方式处理：

@RequestBody 会把接收到的对象进行自动转换，转换的对象是你申明的对象。如下方的String，UserForm

//1.key不带冒号，可以转换为string，map解析。
loginForm = {username: "admin", password: "111111"}

@PostMapping(value = "/login")
@ResponseBody
public Result<String> loginIn(@RequestBody String loginForm) {
        Map ob= (Map) JSONObject.parse(loginForm);
        String name = (String) ob.get("username");
        String pass = (String) ob.get("password");
}


//2.key带冒号，可以直接转换对象，注意UserForm 的key要与RequestBody 的username，password保持一致
loginForm = {”username“: "admin", ”password“: "111111"}

@PostMapping(value = "/login")
@ResponseBody
public Result<String> loginIn(@RequestBody UserForm loginForm) {
        String name = loginForm.getUsername;
        String pass = loginForm.getPassword;
}