详解SpringBoot应用跨域访问解决方案

一、什么是跨域访问

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

成都创新互联公司专业提供资阳托管服务器服务，为用户提供五星数据中心、电信、双线接入解决方案，用户可自行在线购买资阳托管服务器服务，并享受7*24小时金牌售后服务。

虽然跨域访问被禁止之后，可以在一定程度上提高了应用的安全性，但也为开发带来了一定的麻烦。比如：我们开发一个前后端分离的易用，页面及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进行全局跨域配置

 
 
 
 
      
  
  
  
  1. @Configuration 
    2.   
  
  
  
  2.     public class GlobalCorsConfig { 
    3.   
  
  
  
  3.         @Bean 
    4.   
  
  
  
  4.         public CorsFilter corsFilter() { 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.             CorsConfiguration config = new CorsConfiguration(); 
    7.   
  
  
  
  7.             //开放哪些ip、端口、域名的访问权限，星号表示开放所有域 
    8.   
  
  
  
  8.             config.addAllowedOrigin("*"); 
    9.   
  
  
  
  9.             //是否允许发送Cookie信息 
    10.   
  
  
  
  10.             config.setAllowCredentials(true); 
    11.   
  
  
  
  11.             //开放哪些Http方法，允许跨域访问 
    12.   
  
  
  
  12.             config.addAllowedMethod("GET","POST", "PUT", "DELETE"); 
    13.   
  
  
  
  13.             //允许HTTP请求中的携带哪些Header信息 
    14.   
  
  
  
  14.             config.addAllowedHeader("*"); 
    15.   
  
  
  
  15.             //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息） 
    16.   
  
  
  
  16.             config.addExposedHeader("*"); 
    17.   
  
  
  
  17.      
    18.   
  
  
  
  18.             //添加映射路径，“/**”表示对所有的路径实行全局跨域访问权限的设置 
    19.   
  
  
  
  19.             UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource(); 
    20.   
  
  
  
  20.             configSource.registerCorsConfiguration("/**", config); 
    21.   
  
  
  
  21.      
    22.   
  
  
  
  22.             return new CorsFilter(configSource); 
    23.   
  
  
  
  23.         } 
    24.   
  
  
  
  24.     } 
    25.

3.2. 重写WebMvcConfigurer的addCorsMappings方法（全局跨域配置）

 
 
 
 
      
  
  
  
  1. @Configuration 
    2.   
  
  
  
  2.     public class GlobalCorsConfig { 
    3.   
  
  
  
  3.         @Bean 
    4.   
  
  
  
  4.         public WebMvcConfigurer corsConfigurer() { 
    5.   
  
  
  
  5.             return new WebMvcConfigurer() { 
    6.   
  
  
  
  6.                 @Override 
    7.   
  
  
  
  7.                 public void addCorsMappings(CorsRegistry registry) { 
    8.   
  
  
  
  8.                     registry.addMapping("/**")    //添加映射路径，“/**”表示对所有的路径实行全局跨域访问权限的设置 
    9.   
  
  
  
  9.                             .allowedOrigins("*")    //开放哪些ip、端口、域名的访问权限 
    10.   
  
  
  
  10.                             .allowCredentials(true)  //是否允许发送Cookie信息  
    11.   
  
  
  
  11.                             .allowedMethods("GET","POST", "PUT", "DELETE")     //开放哪些Http方法，允许跨域访问 
    12.   
  
  
  
  12.                             .allowedHeaders("*")     //允许HTTP请求中的携带哪些Header信息 
    13.   
  
  
  
  13.                             .exposedHeaders("*");   //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息） 
    14.   
  
  
  
  14.                 } 
    15.   
  
  
  
  15.             }; 
    16.   
  
  
  
  16.         } 
    17.   
  
  
  
  17.     } 
    18.

3.3.使用CrossOrigin注解（局部跨域配置）

  • 将CrossOrigin注解加在Controller层的方法上，该方法定义的RequestMapping端点将支持跨域访问
  • 将CrossOrigin注解加在Controller层的类定义处，整个类所有的方法对应的RequestMapping端点都将支持跨域访问
 
 
 
 
      
  
  
  
  1. @RequestMapping("/cors") 
    2.   
  
  
  
  2.     @ResponseBody 
    3.   
  
  
  
  3.     @CrossOrigin(origins = "http://localhost:8080", maxAge = 3600)  
    4.   
  
  
  
  4.     public String cors( ){ 
    5.   
  
  
  
  5.         return "cors"; 
    6.   
  
  
  
  6.     } 
    7.

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

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

 
 
 
 
      
  
  
  
  1. @RequestMapping("/cors") 
    2.   
  
  
  
  2.     @ResponseBody 
    3.   
  
  
  
  3.     public String cors(HttpServletResponse response){ 
    4.   
  
  
  
  4.         //使用HttpServletResponse定义HTTP请求头，最原始的方法也是最通用的方法 
    5.   
  
  
  
  5.         response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080"); 
    6.   
  
  
  
  6.         return "cors"; 
    7.   
  
  
  
  7.     } 
    8.

四、实现与测试

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

 
 
 
 
      
  
  
  
  1. $.ajax({ 
    2.   
  
  
  
  2.             url: 'http://localhost:8090/cors', 
    3.   
  
  
  
  3.             type: "POST", 
    4.   
  
  
  
  4.             xhrFields: { 
    5.   
  
  
  
  5.                withCredentials: true    //允许发送Cookie信息 
    6.   
  
  
  
  6.             }, 
    7.   
  
  
  
  7.             success: function (data) { 
    8.   
  
  
  
  8.                 alert("跨域请求配置成功") 
    9.   
  
  
  
  9.             }, 
    10.   
  
  
  
  10.             error: function (data) { 
    11.   
  
  
  
  11.                 alert("跨域请求配置失败") 
    12.   
  
  
  
  12.             } 
    13.   
  
  
  
  13.         }) 
    14.
  • 跨域请求配置成功表示：我们的跨域配置生效，ajax请求可以正确访问服务端接口。
  • 跨域请求配置失败表示：我们的跨域配置未生效，请参照检查第三节检查各项配置是否正确。

分享名称：详解SpringBoot应用跨域访问解决方案
网页路径：http://www.36103.cn/qtweb/news46/33346.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站导航知识

各行业网站

教育网站设计方案　　 　抖音短视频拍摄　　 　成都网站营销　　 　成都400电话　　 　抖音短视频　　 　遂宁网站建设　　 　重庆网站设计　　 　东方电机技改服务有限公司　　 　成都二枢机房　　 　虚拟主机　　 　网站建设方案　　 　网站推广公司　　 　成都网络营销　　 　成都品牌网站设计　　 　德阳服务器托管　　 　成都名片印刷　　 　成都防护栏　　 　美美搬家　　 　网站推广　　 　德阳机房托管