专栏首页Java识堂配置跨域后,框架帮我们做了什么?

配置跨域后,框架帮我们做了什么?

跨域问题

现在绝大多数公司的项目都是前后端分离的,前后端分离后势必会遇到跨域问题。如下图

继续debug发现,reponse为undefined,提示消息为Network Error。

所以当你和前端联调的时候一直请求失败,报网络错误,一般情况下是后端没有做跨域配置。

注意此时并不是后端没有收到请求,而是收到请求了,也返回结果了,但是浏览器将结果拦截了,并且报错。

同源策略

那么浏览器为什么会报错呢?

因为浏览器基于安全考虑而引入的同源策略

协议+域名+端口三者都相同时,才不会产生跨域问题,即同源。此时才能读取到服务端的响应

当前url

请求url

是否跨域

https://www.javashitang.com

http://www.javashitang.com

是,协议不同

https://www.javashitang.com

http://book.javashitang.com

是,域名不同

https://www.javashitang.com

http://www.javashitang.com:8000

是,端口不同

为什么要有同源策略呢?

当然是为了安全起见,举个例子,以银行转账为例,看看你的钱是怎么没的

这就是著名的CSRF攻击(跨站请求伪造,当然还有很多其他方式),还有如果第5步不对请求的来源进行校验,那么你的钱已经被转走了

html页面中的如下三个标签是允许跨域加载资源的

  1. <img src=XXX>
  2. <link href=XXX>
  3. <script src=XXX>

如何解决跨域

虽然同源策略保证了安全,但一些合理的用途也会受到影响。解决跨域的方式有很多种,简单介绍2个

JSONP

JSONP主要是利用<script>标签将请求发送出去,来实现数据的加载,但这种方式有一个缺点,即只能支持GET请求,其他请求都不能支持,因为JSONP这种方式已经很少使用了,所以不做过多的介绍

CROS

非简单请求

在正式的跨域请求前,发送一个OPTIONS请求去询问服务器是否接受接下来的跨域请求,携带如下header

Origin:发起请求原来的域 Access-Control-Request-Method:将要发起的跨域请求方式(GET/POST/…) Access-Control-Request-Headers:将要发起的跨域请求中包含的请求头字段

服务器在返回中增加如下header来表明是否允许这个跨域请求。浏览器收到后进行检查如果不符合要求则不会发起后续请求

Access-Control-Allow-Origin:允许哪些域来访问(*表示允许所有域的请求) Access-Control-Allow-Methods:允许哪些请求方式 Access-Control-Allow-Headers:允许哪些请求头字段 Access-Control-Allow-Credentials:是否允许携带Cookie

简单请求

每次都要发送二次请求是不是很麻烦?所以做了优化

当请求方法是HEAD、GET、POST 并且请求头只有如下几个时,被定义为简单请求 Accept Accept-Language Content-Language Last-Event-ID Content-Type:(application/x-www-form-urlencoded、multipart/form-data、text/plain)

简单请求会在请求中加入Origin头,直接发起请求,不会先询问了。后端返回相应的header即可

Spring支持跨域

理解了跨域的本质,再看各种配置其实就是根据请求往reponse中增加header

利用Filter

配置如下Filter,CrossDomainFilter是对javax.servlet.Filter的封装,本质上是一个Filter。

可以看到我多返回了一个header,Access-Control-Max-Age,他表明了询问结果的有效期限,即在3600s之内浏览器可以不必再次询问

@Component
@WebFilter(filterName = "crossDomain", urlPatterns = "/*")
public class CrossDomainFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        // 此处可以进行白名单检测
        if(CorsUtils.isCorsRequest(request)) {
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));
            response.setHeader("Access-Control-Allow-Methods", request.getHeader("Access-Control-Request-Method"));
            response.setHeader("Access-Control-Max-Age", "3600");
        }
        // 是个OPTIONS请求,header已设好,不用执行后续逻辑,直接return
        if(CorsUtils.isPreFlightRequest(request)) {
            return;
        }
        filterChain.doFilter(request, response);
    }
}

看一下用到的工具类

public abstract class CorsUtils {

    // 请求中有 origin 这个header则返会true
    public static boolean isCorsRequest(HttpServletRequest request) {
        return (request.getHeader(HttpHeaders.ORIGIN) != null);
    }

    public static boolean isPreFlightRequest(HttpServletRequest request) {
        return (isCorsRequest(request) && HttpMethod.OPTIONS.matches(request.getMethod()) &&
                request.getHeader(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD) != null);
    }

}

利用CorsRegistry

@Configuration
public class GlobalCorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                // 添加映射路径
                registry.addMapping("/**")
                        // 允许的域
                        .allowedOrigins("*")
                        // 允许携带cookie
                        .allowCredentials(true)
                        // 允许的请求方式
                        .allowedMethods("GET","POST", "PUT", "DELETE")
                        // 允许的请求头
                        .allowedHeaders("*");
            }
        };
    }
}

利用@CrossOrigin注解

支持更细粒度的配置,可以用法方法上或者类上

@RestController
@RequestMapping("resource")
@CrossOrigin({"http://127.0.0.1:8080"})
public class ResourceController

其他方式支持跨域

看到这你可能会产生疑问,我们的项目中没有跨域的配置啊,怎么还能支持跨域?那估计是把设置header这些活交给网关层来做了。

本文分享自微信公众号 - Java识堂(erlieStar),作者:李立敏

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 学完这100多技术,能当架构师么?(非广告)

    前几天,有个搞培训的朋友想要个java后端目前最常用的工具和框架,正好我以前画过这样一张图,于是发给了他。虽然不是很全,但也希望得到他的夸奖。没想到…

    Java识堂
  • 三种常见的限流算法

    一般做接口限流主要是为了应对突发流量,避免突发流量拖垮服务。如下面一些场景就有可能发生突发流量

    Java识堂
  • 架构师必备,带你弄清混乱的JAVA日志体系!

    还在为弄不清commons-logging.jar、log4j.jar、sl4j-api.jar等日志框架之间复杂的关系而感到烦恼吗?还在为如何统一系统的日志输...

    Java识堂
  • Springboot处理CORS跨域请求的三种方法

    浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略,否则就是跨域的HTTP请求,默认情况下是被禁止的。换句话说,浏...

    陈哈哈
  • 解决:The 'Access-Control-Allow-Origin' header contains multiple values'x

    版权声明:这可是本菇凉辛辛苦苦原创的,转载请一定带上我家地址,不要忘记了哈 . https://b...

    微风-- 轻许--
  • 前后端分离开发跨域问题

    因为之前所在的公司开发模式前后端没有分离,所以在实际的开发中,基本上没有遇到跨域请求的问题,也没有注意相关问题。

    java攻城狮
  • Javascript跨域后台设置拦截

    子域名之间互相访问需要跨域 结论放在开头: 服务端必须设置允许跨域 客户端带cookie需要设置withCredentials 无论服务端是否允许跨域,该req...

    Ryan-Miao
  • JAVA | Java 解决跨域问题 花式解决跨域问题

    我们在开发过程中经常会遇到前后端分离而导致的跨域问题,导致无法获取返回结果。跨域就像分离前端和后端的一道鸿沟,君在这边,她在那边,两两不能往来.

    双鬼带单
  • 商城项目-跨域问题

    而我们刚才是从manage.leyou.com去访问api.leyou.com,这属于二级域名不同,跨域了。

    cwl_java
  • Yii支持多域名cors原理的实现

    平常我们遇到跨域问题时,常使用 cors(Cross-origin resource sharin)方式解决。不知你是否注意到,在设置响应头 Access-Co...

    砸漏

扫码关注云+社区

领取腾讯云代金券