Vue+Springboot解决前后端跨域问题

前端：使用的是ant design vue ，端口号为8000

后端：使用的是springboot框架开发，端口号为8080

需求：前端发送请求，后端可以进行处理，并返回结果

第一步，修改前端,前端测试的时候会使用Mock数据，现在进行前后端分离，就不再范文mock数据

修改.env.development文件

NODE_ENV=development
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=http://localhost:8080/

还需要对main.js中的数据挂载进行修改，对main.js中的 mock导入进行注释

// import './mock'

第二步，修改后端，实现跨域的两种方式

第一种：在后端文件中建立config包，进一个类填入下面代码：

@Configuration
public class CorsConfig {
     

    private CorsConfiguration buildConfig() {
     
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //  你需要跨域的地址  注意这里的 127.0.0.1 != localhost
        // * 表示对所有的地址都可以访问
        corsConfiguration.addAllowedOrigin("*");

        corsConfiguration.addAllowedHeader("*");//  跨域的请求头

        corsConfiguration.addAllowedMethod("*"); //  跨域的请求方法

        corsConfiguration.setAllowCredentials(true);  //在跨域请求的时候获取同一个 session

        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
     
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        
        source.registerCorsConfiguration("/**", buildConfig()); //配置 可以访问的地址
        
        return new CorsFilter(source);
    }
}

第二种方式：较第一种方式更加灵活，不需要创建配置类
直接在每个controller中进行修改，修改如下：

@CrossOrigin(origins = "*",allowedHeaders = "*",methods = {
     },allowCredentials = "true")

修改实例：

该方法可以具体配置每个的origins ,allowedHeaders ,methods ，针对每个controller可以不同的设置