基于Ant DesignPro Vue + SpringBoot 前后端分离 - 部署后解决跨域的问题

基于Ant DesignPro Vue + SpringBoot 前后端分离 - 部署后解决跨域的问题

通过Ant DesignPro Vue + SpringBoot 搭建的后台管理系统后，实现了前后端分离，并实现了登录认证，认证成功后返回该用户相应权限范围内可见的菜单；但时将服务打包部署后遇到了跨域的问题。本文解决了打包发布部署后的跨域问题。

Ant Design Pro相关系列文章：
一、AntDesign Pro安装过程
二、基于Ant DesignPro实现通过SpringBoot后台加载自定义菜单-前端部分
三、基于Ant DesignPro实现通过SpringBoot后台加载自定义菜单-SpringBoot后端部分
四、搭建Vue版Ant Design Pro后台管理系统
五、基于Ant DesignPro Vue实现通过SpringBoot后台加载自定义菜单- 前后端分离
六、基于Ant DesignPro Vue + SpringBoot 前后端分离 - 部署后解决跨域的问题

源码开源地址
后端Springboot工程代码已上传gitee，地址：https://gitee.com/duyanjun/mcvboot.git

一、问题描述

通过Ant DesignPro Vue + SpringBoot 搭建的后台管理系统后，实现了前后端分离，并实现了登录认证，认证成功后返回该用户相应权限范围内可见的菜单；但时将服务打包部署后遇到了跨域的问题，通过网络请求中获取到信息是：strict-origin-when-cross-origin，如下图所示：

二、解决方案

1、前端修改

1）、修改vue.config.js

将devServer配置项中添加proxy配置项，并将target改为process.env.VUE_APP_API_BASE_URL

  devServer: {
    // development server port 8000
    port: 8000,
    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    proxy: {
       '/api': {
         target: process.env.VUE_APP_API_BASE_URL,
         ws: false,
         changeOrigin: true
       }
     }
  },

2）、修改.env

VUE_APP_API_BASE_URL=生产环境的后端服务接口地址

3）、修改.env.development

VUE_APP_API_BASE_URL=开发环境的后端服务接口地址

4）、重新编译发布

在前端代码根目录执行下面命令

yarn run build

出现上面的提示表示编译成功。

2、后端修改

1）、在springboot后端服务工程添加跨域配置类

package cn.chinaelink.im.mcvboot.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CrossOriginConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOriginPattern("*");
        corsConfiguration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}

2）、重新编译jar

3、重新部署

1）、停止运行的容器

docker stop test-mcvboot
docker stop mcui-mcvboot
docker rm mcui-mcvboot
docker rm test-mcvboot 

2）、删除旧的docker images

docker images
docker rmi -f mcui
docker rmi -f mcvboot

3）、重新打包Docker镜像，并运行

cd /opt/mcvboot/
docker build -t mcvboot .
docker run --name test-mcvboot -d -p 8080:8080 mcvboot


cd /opt/mcvboot/antdvPromc
docker build -t mcui .
docker run --name mcui-mcvboot -d -p 8000:80 mcui