axios 无法接受 Spring Boot 控制器发送的响应数据答案

【问题标题】：axios can't accept response data sent by Spring Boot controlleraxios 无法接受 Spring Boot 控制器发送的响应数据
【发布时间】：2019-02-08 12:39:21
【问题描述】：

我尝试将 vue.js 与 Spring Boot 集成。这是我的 vue.js 代码：

<template>
// ...
</template>

<script>
export default {
  name: "Login",
  data: function() {
      return {
          username: '',
          password: '',
          msg: ''
      }
  },
  methods: {
      // post data to Spring Boot
      login() {
          axios.post('/login',{
              username: this.username,
              password: this.password
          })
          .then(function(response) {
              if(response.data.code === 200){
                this.$store.dispatch('setCurrentUser',this.username);
                // vue-route
                this.$router.push('/course');
              } else {
                  this.msg = response.message;
              }
          })
          .catch(function(err) {
              this.msg = 'error';
          });
      }
  }
};
</script>

这是我的 Spring Boot 控制器：

@RestController
@ResponseBody
public class LoginController {

    @Autowired
    private ResultGenerator resultGenerator;

    @PostMapping("/login")
    public RestResult login(String username, String password){
        if(username.equals("123") && password.equals("123")){
            return resultGenerator.getSuccessResult();
        } else {
            return resultGenerator.getFailResult("error");
        }
    }
}

控制器将返回类似于：{"code":200,"message":"success","data":null} 的 JSON 数据。当login 方法被调用时，控制器可以接受用户名和密码并且控制器也发送响应数据。但这就是全部，vue-router 没有工作。我在浏览器中看到的只是：

谁能帮忙？
------------------ 加法 -----------------------
这是 vue-router 配置：

const routes = [
  {
    path: '/',
    component: Login
  },
  {
    path: '/signin',
    component: Signin
  },
  {
    path: '/course',
    component: Course
  }
];

const router = new VueRouter({
  routes,
  mode: "history"
});

【问题讨论】：

标签： spring-boot vue.js

【解决方案1】：

如果 Vue.js 和 Spring boot 是 2 个不同的应用程序（如后端和前端），这可能会有所帮助：

尝试在您的 @controller 或暴露其余部分的方法上使用 @CrossOrigin (CORS)，我在 Ionic 3 proyect 上遇到了类似的问题，他们解决了问题。

示例：

@CrossOrigin(origins = "http://localhost:9000")
@GetMapping("/greeting")
public Greeting greeting(@RequestParam(required=false, defaultValue="World") String name) {
    System.out.println("==== in greeting ====");
    return new Greeting(counter.incrementAndGet(), String.format(template, name));
}

它应该看起来像这样：

@RestController

@ResponseBody 公共类登录控制器 {

@Autowired
private ResultGenerator resultGenerator;

@CrossOrigin(origins = "http://localhost:9000") // The IP:PORT of the vue app origin
@PostMapping("/login")
public RestResult login(String username, String password){
    if(username.equals("123") && password.equals("123")){
        return resultGenerator.getSuccessResult();
    } else {
        return resultGenerator.getFailResult("error");
    }
}

}

Source from spring.io Here! :D

【讨论】：

【解决方案2】：

问题可能是您返回了 resultGenerator.getSuccessResult()。您是否尝试过重定向到 Spring Boot Controller 中的“/course”路径？

 @PostMapping("/login")
    public RestResult login(String username, String password){
        if(username.equals("123") && password.equals("123")){
            this.$router.push('/course');
        } else {
            return resultGenerator.getFailResult("error");
        }
    }

【讨论】：