【JavaWeb】跨域问题的多种解决方案

1.同源策略

同源策略是浏览器的一种安全策略,违背同源策略就是跨域
同源:协议,域名,端口号必需完全相同

一个URL由如下组成
在这里插入图片描述

2.后端解决跨域问题

2.1目标方法加上 @CrossOrigin

@RequestMapping("/getUsername")
@CrossOrigin
public String getUsername(HttpSession session){
    String username=(String) session.getAttribute("user");
    return username;
}

2.2添加CROS过滤器

@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);
    }
}

2.3实现WebMvcConfigurer接口

@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)//3600s之类浏览器不会再次询问
                .allowedHeaders("*");
    }
}

3.Nginx解决跨域

3.1解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置

location / {
  add_header Access-Control-Allow-Origin *;
}

3.2反向代理接口跨域

同源策略是浏览器的安全策略,不是HTTP协议的一部分。
服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。

实现思路:通过Nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookiedomain信息,方便当前域cookie写入,实现跨域登录。

#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

4.其它跨域解决方案

前端常见跨域解决方案传送门(点我)

总结:简单的跨域请求Jsonp即可,复杂的CORS,窗口之间JS跨域postMessage,开发环境下接口跨域用Nginx反向代理或Node中间件比较方便


版权声明:本文为weixin_43615816原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。