springboot+vue跨域问题

跨域问题

spring boot+vue前后端分离因为项目不在一个地址导致接收请求受阻，这个时候我们只需要在后端添加配置类即可解决跨域问题。可以写全局配置类，也可以在每一个controller上面加上一个CrossOrigin注解，两者相比较而言前者只需配置一次便可全局生效，后者需要在每一个controller类里配置，比较麻烦，但后者比较灵活，可以为不同controller配置不同的权限。

1. 编写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);
    }
}

2. 加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";
    }
}

如果能请求成功，那么就意味着整个项目已经可以顺利进行通信，后续的话只需要完成对应业务的编写即可，

---