个人中心
gpt4 book ai didi

Spring Cloud项目前后端分离跨域的操作

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Spring Cloud项目前后端分离跨域的操作由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

跨域问题，其实百度上面有一堆的解决方案

针对普通的情况其实百度上面的方案都是可行的.

我这里主要介绍2种情况。

当然我这里的配置都是基于网关的，而不是基于服务的.

1、没有增加权限验证.

2、增加了spring security的权限验证（我这里是基于keyCloak），增加了Authorization 。

首先我们介绍第一种情况的解决方法，这个很简单，只需要在启动类里面配置过滤器就可以解决.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@Bean
     public CorsFilter corsFilter() {
         //1.添加CORS配置信息
         CorsConfiguration config = new CorsConfiguration();
           //放行哪些原始域
           config.addAllowedOrigin( "*" );
           //是否发送Cookie信息
           config.setAllowCredentials( true );
           //放行哪些原始域(请求方式)
           config.addAllowedMethod( "*" );
           //放行哪些原始域(头部信息)
           config.addAllowedHeader( "*" );
           //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
           config.addExposedHeader( "*" );
 
         //2.添加映射路径
         UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
         configSource.registerCorsConfiguration( "/**" , config);
 
         //3.返回新的CorsFilter.
         return new CorsFilter(configSource);
     }

我遇到情况就是第二种了，这种情况上面的方式基本没有作用，我这里使用的是keyCloak做的权限验证.

首先增加过滤器配置:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@Component
public class CorsControllerFilter implements Filter{
     @Override
     public void destroy() {
         // TODO Auto-generated method stub
        
     }
 
     @Override
     public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
             throws IOException, ServletException {
         // TODO Auto-generated method stub
         HttpServletResponse res = (HttpServletResponse) response;
         res.setContentType( "text/html;charset=UTF-8" );
         res.setHeader( "Access-Control-Allow-Origin" , "*" );
         res.setHeader( "Access-Control-Allow-Methods" , "POST, GET, OPTIONS, DELETE ,PUT" );
         res.setHeader( "Access-Control-Max-Age" , "3600" );
         res.setHeader( "Access-Control-Allow-Headers" , "*" );
         res.setHeader( "Access-Control-Allow-Credentials" , "true" );
         res.setHeader( "XDomainRequestAllowed" , "1" );
         chain.doFilter(request, response);
     }
 
     @Override
     public void init(FilterConfig arg0) throws ServletException {
         // TODO Auto-generated method stub 
     }
}

在启动类中增加配置 。

?
1
2
3
4
5
6
7
    @Bean
public FilterRegistrationBean filterRegistrationBean() {
     FilterRegistrationBean registrationBean = new FilterRegistrationBean();
     CorsControllerFilter corsControllerFilter = new CorsControllerFilter();
     registrationBean.setFilter(corsControllerFilter);
     return registrationBean;
}

但是针对某些请求，他会先请求OPTIONS请求，造成权限验证失败。所以增加拦截器配置，对所有的OPTIONS的请求直接放行，返回200的状态.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public class OptionsInterceptor implements HandlerInterceptor {
 
     @Override
     public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)
             throws Exception {
         // TODO Auto-generated method stub
     }
 
     @Override
     public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, ModelAndView arg3)
             throws Exception {
         // TODO Auto-generated method stub
     }
 
     @Override
     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
         // TODO Auto-generated method stub
         if (request.getMethod().equals( "OPTIONS" )){
             response.setStatus(HttpServletResponse.SC_OK);
             return false ;
         }
         return true ;
     }
}

配置web配置文件，加载拦截器.

?
1
2
3
4
5
6
7
@Configuration
public class WebMvcConfiguration extends WebMvcConfigurationSupport{
  @Override
     public void addInterceptors(InterceptorRegistry registry) {
         registry.addInterceptor( new OptionsInterceptor()).addPathPatterns( "/**" );
  }
}

本来以为这样配置了应该是可以了，但是在请求的时候OPTIONS的请求居然还是报跨域的问题，增加拦截器允许跨域配置 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public class CrossInterceptor implements HandlerInterceptor{
  @Override
  public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)
    throws Exception {
   // TODO Auto-generated method stub
  }
 
  @Override
  public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, ModelAndView arg3)
    throws Exception {
   // TODO Auto-generated method stub
  }
 
  @Override
  public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
   // TODO Auto-generated method stub
         response.setHeader( "Access-Control-Allow-Origin" , "*" );
         response.setHeader( "Access-Control-Allow-Credentials" , "true" );
         response.setHeader( "Access-Control-Allow-Methods" , "POST, GET, OPTIONS, DELETE, PUT, HEAD" );
         response.setHeader( "Access-Control-Allow-Headers" , "*" );
         response.setHeader( "Access-Control-Max-Age" , "3600" );
         return true ;
  }
}

在WebMvcConfiguration里面增加配置，注意要写在OptionsInterceptor的前面 。

?
1
registry.addInterceptor( new CrossInterceptor()).addPathPatterns( "/**" );

继续测试，跨域问题解决。对于原理其实我也不太清楚，欢迎各位沟通交流.

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我.

原文链接：https://blog.csdn.net/zhuwei_clark/article/details/83413763 。

最后此篇关于Spring Cloud项目前后端分离跨域的操作的文章就讲到这里了,如果你想了解更多关于Spring Cloud项目前后端分离跨域的操作的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： mybatis那些约定的配置你真的都了解吗(经验总结)
文章推荐： 在Spring中编写事务的介绍
文章推荐： 详解application.properties和application.yml文件的区别
文章推荐： Spring概述和快速构建的方式
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com