springboot 和 vue-resource 跨域访问

最新推荐文章于 2024-08-31 14:27:17 发布

原创最新推荐文章于 2024-08-31 14:27:17 发布 · 450 阅读

0 ·

CC 4.0 BY-SA版权

springboot 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用vue-resource进行HTTP请求配置，并实现与SpringBoot后端的跨域通信。同时，展示了SpringBoot 2.x版本中如何通过@CrossOrigin注解支持跨域请求。

vue-resource 配置

import VueResource from 'vue-resource'
Vue.use(VueResource);
Vue.http.options.root = 'http://127.0.0.1:10030';
Vue.http.options.emulateJSON = true;

springboot(2.x版本) 配置
这个注解放到单独的接口上则表示这个接口支持跨域
接口放到Controller上则表示这个Controller种的所有接口支持跨域
接口放到父类Controller上则表示继承的该父类的所有Controller支持跨域

@CrossOrigin 使用这个注解

使用
vue-resource

methods: {
      getcode() {
        this.$http.post('user/register/getPhoneVerificationCode', {'phone': this.phone}).then(function (res) {
          console.log("验证码获取成功");
          console.log(res);
        }, function (res) {
          console.log(res);
          console.log("验证码获取失败")
        });
      },
      register() {
        console.log(this.phone)
        console.log(this.password)
      }
    }

springboot

 @ResponseBody
    @RequestMapping("/pageQuery")
    public Result pageQuery(@NotNull @Min(1) Integer page, @NotNull @Max(300) Integer limit) {
        return userService.pagedQueryUser(page, limit);
    }