后端处理跨域问题

什么是跨域
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子:

http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

怎么解决跨域
我们可以通过**CORS:Cross Origin Resource Sharing来解决也叫(跨域资源共享)**他其实就是由一些HTTP头组成的,当我们的后端代码返回信息的时候前端会通过CORS来阻止这些请求,这时候就存在跨域问题了。这时候我们就可以在CORS的HTTP头中允许他读就可以了当然了前端可以解决跨域问题,我们现在说的是后端解决跨域问题。

在springboot项目中解决跨域问题:

  1. 在目标方法中加@CrossOrigin注解
    当然当我们的方法有很对的时候我们就会相同的注解写很多次这时候我们有第二种方式统一给他处理
@GetMapping("/list")
@CrossOrigin
public List<String> list(){
    List<String> list = Arrays.asList("Java");
    return list;
}
  1. 第二种:添加一个CORS的过滤器
@Configuration
public class CorsConfig {
    
    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
    
}
  1. 第三种:实现 WebMvcConfigurer 接口,重写 addCorsMappings 方法
@Configuration
public class CorsConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")//允许哪些域访问
                .allowedMethods("GET","POST","PUT","DELETE","HEAD","OPTIONS")//允许哪些方法访问
                .allowCredentials(true)//是否允许携带cookie
                .maxAge(3600)//设置浏览器询问的有效期
                .allowedHeaders("*");//
    }
}
Logo

科技之力与好奇之心,共建有温度的智能世界

更多推荐