vue访问springboot跨域问题

Vue与SpringBoot集成：跨域API代理与Hystrix容错处理

原创于 2021-12-08 18:17:39 发布 · 946 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #spring boot #前端

java 同时被 2 个专栏收录

41 篇文章

订阅专栏

vue

27 篇文章

订阅专栏

本文介绍了如何在Vue应用中通过vue.config.js配置proxy实现与SpringBoot API的跨域请求，并在SpringBoot后端使用@HystrixCommand处理Hystrix熔断。重点展示了如何设置代理目标和路径重写，以及后端的异常处理策略。

1、vue端

在vue.config.js加入

devServer: {
//关键proxy
      proxy:{
                  ["/dev-api"]:{
                  target:'http://localhost:9527',
                    changeOrigin:true,
                      pathRewrite: {
                          ['^' + "/dev-ap"]: ''
                      }
                  }
              },
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js')
  },

2、springboot端

在control层加入

@CrossOrigin
@GetMapping("/Product/pageProduct")
@HystrixCommand(fallbackMethod = "processHystrix_Page")
public List<Product> pageProduct(@RequestParam("name") String name, @RequestParam("page") String page, @RequestParam("limit") String limit) {

        try {
            String pageStart = String.valueOf(((Integer.parseInt(page) - 1) * Integer.parseInt(limit)));
            String pageEnd = limit;
            List<Product> productList = this.service.page(name, pageStart, pageEnd);

            if (null == productList) {

                return null;
            }

            return productList;
        } catch (Exception ex) {
            ex.getMessage();
            logger.error(ex.getMessage());
        }
        return null;
    }

    public List<Product> processHystrix_Page(@RequestParam("name") String name, @RequestParam("page") String page, @RequestParam("limit") String limit) {
        return null;
    }

我整合了springcloud，所以有@HystrixCommand注解