SpringBoot解决跨域访问的问题

简介: 本文介绍了跨域访问的概念及其解决方案。同源策略规定浏览器限制不符合协议、Host和端口的请求,导致跨域访问被禁止。为解决此问题,文中提出了三种策略:1) 前端利用HTML标签的特性(如script、iframe)和JSONP、postMessage规避同源策略;2) 通过代理,如nginx或nodejs中间件,使得所有请求看似来自同一源;3) CORS(跨域资源共享),通过设置HTTP响应头允许特定跨域请求。在SpringBoot中,实现CORS有四种方式,包括使用CorsFilter、重写WebMvcConfigurer、CrossOrigin注解以及直接设置响应头。

一、什么是跨域访问

说到跨域访问,必须先解释一个名词:同源策略。所谓同源策略就是在浏览器端出于安全考量,向服务端发起请求必须满足:协议相同、Host(ip)相同、端口相同的条件,否则访问将被禁止,该访问也就被称为跨域访问。

虽然跨域访问被禁止之后,可以在一定程度上提高了应用的安全性,但也为开发带来了一定的麻烦。比如:我们开发一个前后端分离的易用,页面及js部署在一个主机的nginx服务中,后端接口部署在一个tomcat应用容器中,当前端向后端发起请求的时候一定是不符合同源策略的,也就无法访问。那么我们如何解决这个问题?就是本文需要向大家说明的内容。

二、跨域访问的解决方案有哪些?

2.1.第一类方案:前端解决方案

虽然浏览器对于不符合同源策略的访问是禁止的,但是仍然存在例外的情况,如以下资源引用的标签不受同源策略的限制:

   html的script标签

   html的link标签

   html的img标签

   html的iframe标签:对于使用jsp、freemarker开发的项目,这是实现跨域访问最常见的方法,

除了基于HTML本身的特性实现跨域访问,我们还可以使用jsonp、window的postMessage实现跨域访问。这些都是前端实现跨域访问的方式。

2.2.第二类方案:使用代理

实际上对跨域访问的支持在服务端实现起来更加容易,最常用的方法就是通过代理的方式,如:

   nginx或haproxy代理跨域

   nodejs中间件代理跨域

其实实现代理跨域的逻辑非常简单:就是在不同的资源服务:js资源、html资源、css资源、接口数据资源服务的前端搭建一个中间层,所有的浏览器及客户端访问都通过代理转发。所以在浏览器、客户端看来,它们访问的都是同一个ip、同一个端口的资源,从而符合同源策略实现跨域访问。

2.3 第三类方案:CORS

跨域资源共享(CORS):通过修改Http协议header的方式,实现跨域。说的简单点就是,通过设置HTTP的响应头信息,告知浏览器哪些情况在不符合同源策略的条件下也可以跨域访问,浏览器通过解析Http协议中的Header执行具体判断。具体的Header如下:

CROS跨域常用header

Access-Control-Allow-Origin: 允许哪些ip或域名可以跨域访问

Access-Control-Max-Age: 表示在多少秒之内不需要重复校验该请求的跨域访问权限

Access-Control-Allow-Methods: 表示允许跨域请求的HTTP方法,如:GET,POST,PUT,DELETE

Access-Control-Allow-Headers: 表示访问请求中允许携带哪些Header信息,如:Accept、Accept-Language、Content-Language、Content-Type

三、SpringBoot下实现CORS的四种方式

为大家介绍四种实现CORS的方法,两种是全局配置,两种是局部接口生效的配置。一般来说,SpringBoot项目采用其中一种方式实现CORS即可。

3.1.使用CorsFilter进行全局跨域配置

   @Configuration

   public class GlobalCorsConfig {

       @Bean

       public CorsFilter corsFilter() {

         

           CorsConfiguration config = new CorsConfiguration();

           //开放哪些ip、端口、域名的访问权限,星号表示开放所有域

           config.addAllowedOrigin("*");

           //是否允许发送Cookie信息

           config.setAllowCredentials(true);

           //开放哪些Http方法,允许跨域访问

           config.addAllowedMethod("GET","POST", "PUT", "DELETE");

           //允许HTTP请求中的携带哪些Header信息

           config.addAllowedHeader("*");

           //暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)

           config.addExposedHeader("*");

   

           //添加映射路径,“/**”表示对所有的路径实行全局跨域访问权限的设置

           UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();

           configSource.registerCorsConfiguration("/**", config);

   

           return new CorsFilter(configSource);

       }

   }

   

3.2. 重写WebMvcConfigurer的addCorsMappings方法(全局跨域配置)

   @Configuration

   public class GlobalCorsConfig {

       @Bean

       public WebMvcConfigurer corsConfigurer() {

           return new WebMvcConfigurer() {

               @Override

               public void addCorsMappings(CorsRegistry registry) {

                   registry.addMapping("/**")    //添加映射路径,“/**”表示对所有的路径实行全局跨域访问权限的设置

                           .allowedOrigins("*")    //开放哪些ip、端口、域名的访问权限

                           .allowCredentials(true)  //是否允许发送Cookie信息  

                           .allowedMethods("GET","POST", "PUT", "DELETE")     //开放哪些Http方法,允许跨域访问

                           .allowedHeaders("*")     //允许HTTP请求中的携带哪些Header信息

                           .exposedHeaders("*");   //暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)

               }

           };

       }

   }

   

3.3.使用CrossOrigin注解(局部跨域配置)

   将CrossOrigin注解加在Controller层的方法上,该方法定义的RequestMapping端点将支持跨域访问

   将CrossOrigin注解加在Controller层的类定义处,整个类所有的方法对应的RequestMapping端点都将支持跨域访问

   @RequestMapping("/cors")

   @ResponseBody

   @CrossOrigin(origins = "http://localhost:8080", maxAge = 3600)  

   public String cors( ){

       return "cors";

   }

3.4 使用HttpServletResponse设置响应头(局部跨域配置)

这种方式略显麻烦,不建议在SpringBoot项目中使用。

   @RequestMapping("/cors")

   @ResponseBody

   public String cors(HttpServletResponse response){

       //使用HttpServletResponse定义HTTP请求头,最原始的方法也是最通用的方法

       response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");

       return "cors";

   }

四、实现与测试

在SpringBoot项目外随便定义一个HTML,并写代码触发如下的ajax代码。(触发过程我就不写了,定义一个按钮加一个监听函数即可)。以下是跨域AJAX请求验证的核心代码:

   $.ajax({

           url: 'http://localhost:8090/cors',

           type: "POST",

           xhrFields: {

              withCredentials: true    //允许发送Cookie信息

           },

           success: function (data) {

               alert("跨域请求配置成功")

           },

           error: function (data) {

               alert("跨域请求配置失败")

           }

       })

   跨域请求配置成功表示:我们的跨域配置生效,ajax请求可以正确访问服务端接口。

   跨域请求配置失败表示:我们的跨域配置未生效,请参照检查第三节检查各项配置是否正确。


相关文章
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
1月前
|
安全 Java 应用服务中间件
SpringBoot:CORS是什么?SpringBoot如何解决跨域问题?
CORS是Web开发中常见且重要的机制,SpringBoot通过提供注解、全局配置和过滤器等多种方式来解决跨域问题。选择适合的方式可以帮助开发者轻松处理跨域请求,提高应用的灵活性和安全性。
138 2
|
2月前
|
前端开发 安全 Java
springboot解决跨域问题
跨域问题指前端调用与后端接口不在同一域名或端口时产生的安全限制。本文介绍两种在Spring Boot中解决跨域问题的方法:一是通过配置CorsFilter,二是实现WebMvcConfigurer接口。配置完成后重启项目即可生效。作者:博笙困了。来源:稀土掘金。
|
2月前
|
安全 JavaScript Java
SpringBoot解决跨域最佳实践
本文介绍了跨域问题的起因及最佳实践,重点讲解了SpringBoot中如何利用`CorsFilter`解决跨域问题。首先解释了由于浏览器的同源策略限制导致的跨域现象,然后提出了在服务端入口处解决跨域问题的建议,最后详细展示了三种SpringBoot中配置跨域的方法:使用默认配置、自定义配置规则以及通过配置文件管理跨域设置,以适应不同的应用场景。
|
2月前
|
前端开发 安全 JavaScript
SpringBoot 如何解决跨域问题?
本文深入探讨了Spring Boot解决跨域问题的方法,包括全局配置CORS、使用@CrossOrigin注解和自定义过滤器,提供了详细的代码示例和分析,帮助开发者有效应对Web开发中的跨域挑战。
114 4
|
2月前
|
JSON JavaScript 前端开发
springboot中使用knife4j访问接口文档的一系列问题
本文作者是一位自学前端两年半的大一学生,分享了在Spring Boot项目中使用Knife4j遇到的问题及解决方案,包括解决Swagger请求404错误、JS错误等,详细介绍了依赖升级、注解替换及配置修改的方法。
365 1
|
2月前
|
JSON JavaScript 前端开发
springboot中使用knife4j访问接口文档的一系列问题
本文介绍了在Spring Boot项目中使用Knife4j访问接口文档时遇到的一系列问题及其解决方案。作者首先介绍了自己是一名自学前端的大一学生,熟悉JavaScript和Vue,正在向全栈方向发展。接着详细说明了如何解决Swagger请求404错误,包括升级Knife4j依赖、替换Swagger 2注解为Swagger 3注解以及修改配置类中的代码。最后,针对报JS错误的问题,提供了删除消息转换器代码的解决方法。希望这些内容能对读者有所帮助。
465 5
|
3月前
|
JavaScript 前端开发 Java
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
这篇文章详细介绍了如何在前端Vue项目和后端Spring Boot项目中通过多种方式解决跨域问题。
437 1
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
|
6月前
|
缓存 监控 Java
优化Spring Boot应用的数据库访问性能
优化Spring Boot应用的数据库访问性能
|
4月前
|
Java Spring
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
本文介绍了Spring Boot中静态资源的访问位置、如何进行静态资源访问测试、自定义静态资源路径和静态资源请求映射,以及如何处理自定义静态资源映射对index页面访问的影响。提供了两种解决方案:取消自定义静态资源映射或编写Controller来截获index.html的请求并重定向。
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问