跨域问题
spring boot+vue前后端分离因为项目不在一个地址导致接收请求受阻,这个时候我们只需要在后端添加配置类即可解决跨域问题。可以写全局配置类,也可以在每一个controller上面加上一个CrossOrigin注解,两者相比较而言前者只需配置一次便可全局生效,后者需要在每一个controller类里配置,比较麻烦,但后者比较灵活,可以为不同controller配置不同的权限。
- 编写config类
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
// 你需要跨域的地址 注意这里的 127.0.0.1 != localhost
// * 表示对所有的地址都可以访问
corsConfiguration.addAllowedOrigin("*");
// 跨域的请求头
corsConfiguration.addAllowedHeader("*"); // 2
// 跨域的请求方法
corsConfiguration.addAllowedMethod("*"); // 3
//加上了这一句,大致意思是可以携带 cookie
//最终的结果是可以 在跨域请求的时候获取同一个 session
corsConfiguration.setAllowCredentials(true);
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
//配置 可以访问的地址
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}
}
- 加CrossOrigin注解
@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "*",methods = {})
示例controller
@RestController
@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "*",methods = {})
public class LoginController {
@RequestMapping("/auth/2step-code")
public boolean step_code2(){
System.out.println("此请求是前端框架带的默认请求,可以不做任何处理,也可以在前端将其删除");
System.out.println("step_code2");
return true;
}
@RequestMapping("/auth/login")
public String login(){
System.out.println("login");
return "success";
}
}
如果能请求成功,那么就意味着整个项目已经可以顺利进行通信,后续的话只需要完成对应业务的编写即可,