前端:使用的是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可以不同的设置