跨域问题及后端解决方案

跨域问题及后端解决方案

问题产生

跨域问题主要是由于浏览器的同源策略产生：

1.同源策略是什么？
同源策略是一种约定，它是浏览器最核心也最基本的安全功能

2.什么叫同源

同源就是指，域名、协议、端口相同

3.为什么要用呢？
同源策略存在的意义：
在非同源的环境下，用户的隐私数据可以被随意获取
4.同源策略的限制范围？

localhost 调用 127.0.0.1 跨域

http://www.hanny.cn/h.html 调用 http://www.hanny.cn/i.php 非跨域

http://www.hanny.cn/h.html 调用 http://www.john.cn/i.php 跨域了,因为主域已经发生了变化

http://n.hanny.cn/index.html 调用 http://b.john.cn/server.php 跨域了,因为子域名不同

http://www.hanny.cn:8080/h.html 调用 http://www.hanny.cn/i.p 跨域了,因为端口不同

https://www.hanny.cn/s.html 调用 http://www.hanny.cn/i.php 跨域了,协议不同了

后端解决方案

1.加注解@CrossOrigin在类或者方法上

2.添加过滤器

@Component
public class CrosFiter implements Filter {
 
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        Filter.super.init(filterConfig);
    }
 
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
        filterChain.doFilter(servletRequest, servletResponse);
    }
 
    @Override
    public void destroy() {
        Filter.super.destroy();
    }
}

3.添加映射

@Configuration
public class GlobalCorsConfig {
 
    @Bean
    public CorsFilter corsFilter() {
        //1. 添加 CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOrigin("*");
        //放行哪些请求方式
        config.addAllowedMethod("*");
        //放行哪些原始请求头部信息
        config.addAllowedHeader("*");
        //暴露哪些头部信息
        config.addExposedHeader("*");
        //2. 添加映射路径
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",config);
        //3. 返回新的CorsFilter
        return new CorsFilter(corsConfigurationSource);
    }
}

4.重写WebMvcConfigurer中addCorsMappings方法

  @Bean
    public WebMvcConfigurer MyWebMvcConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
 
                        //放行哪些原始域
                        .allowedOrigins("*")
                        .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                        .allowedHeaders("*")
                        .exposedHeaders("*");
            }
        };

以上。