spring-boot - axios 无法接受 Spring Boot 控制器发送的响应数据

问题描述

我尝试将 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");
        }
    }
}

控制器将返回 JSON 数据，如下所示：{"code":200,"message":"success","data":null}. 当该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-bootvue.js

如果 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 公共类 LoginController {

@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");
    }
}

}

来源 spring.io 这里！:D

spring-boot - axios 无法接受 Spring Boot 控制器发送的响应数据

问题描述

解决方案

推荐阅读