【SpringBoot系列】实现跨域的几种方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了【SpringBoot系列】实现跨域的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

在Web开发中，跨域是一个常见的问题。由于浏览器的同源策略，一个Web应用程序只能访问与其自身同源（即，相同协议、主机和端口）的资源。

这种策略的存在是为了保护用户的安全，防止恶意网站读取或修改用户的数据。

然而，现代Web应用程序经常需要访问不同源的资源，这就需要实现跨域。

本文将介绍在SpringBoot中实现跨域的几种方式。

一、什么是跨域

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,或者涉及到两个不同域名的资源之间的交互。

由于同源策略(Same Origin Policy)的限制,浏览器不允许跨域请求。同源策略规定,A网页设置的Cookie、LocalStorage和IndexDB无法被同源以外的网页读取。

跨域请求会被浏览器拒绝。举个例子:- DOMAIN-A.com 和 DOMAIN-B.com 是两个不同的域名,它们之间的请求就是跨域请求。

DOMAIN-A.com/dir1 和 DOMAIN-A.com/dir2 虽然路径不同,但是域名相同,所以不是跨域。

二、跨域问题出现的原因

浏览器的同源策略(Same Origin Policy)限制了跨域请求。主要出于安全考虑,浏览器限制脚本只能读取与之同源的资源。同源指的是协议、域名、端口都相同。跨域请求会因为违反同源策略而被阻止。
Cookie和本地存储也遵循同源策略。A域名下的页面无法读取B域名下的Cookie、localStorage等。
跨域JavaScript请求会报错。比如A页面请求B页面的JS文件,就会报错。
跨域DOM无法访问。A页面的JS无法获取B页面的DOM节点。
跨域数据请求需要进行CORS预检。浏览器会在正式通信之前,先进行一次HTTP查询请求,询问服务器是否允许跨源请求。
iframe也受同源策略限制。A页面的iframe嵌入B页面,A页面JS无法访问iframe的DOM。
跨域图片获取限制。A页面无法获取B页面img标签的src,会报错。

三、常见的跨域请求方式

JSONP:通过script标签加载JS文件来实现跨域通信。
CORS:服务器端设置HTTP头,允许指定的请求来源跨域访问。
postMessage:A域的window向B域的window发送消息,实现跨域通信。

四、SpringBoot实现跨域的几种方式

1.@crossOrigin 注解

我们可以在Controller的方法上直接使用@CrossOrigin注解

,如:

@CrossOrigin(origins = "http://domain1.com")
@RestController
public class TestController {
    @GetMapping("/test")
    public String test() {
        return "hello";
    }
}

这种方式简单适用,但是不能应对所有的跨域请求,比较局限。

2.过滤器CorsFilter

我们可以注册CorsFilter跨域过滤器,

如:

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("http://domain1.com");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

然后该过滤器会应用到所有的请求上。这种方式配置更加灵活。

3.配置类WebMvcConfigurer

我们可以在WebMvcConfigurer接口的addCorsMappings()方法中添加跨域配置,

如:

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://domain1.com")
            .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH")
            .allowedHeaders("*")
            .allowCredentials(true);
    }
}

这也是一种比较常用的跨域解决方案。