阿里云服务器部署前后端分离项目跨域,Spring Cloud项目前后端分离跨域的操作方法...

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

发布时间：2021-06-25 17:45:18

来源：亿速云

阅读：86

作者：chen

本篇内容主要讲解“Spring Cloud项目前后端分离跨域的操作方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Spring Cloud项目前后端分离跨域的操作方法”吧!

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

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

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

当然我这里的配置都是基于网关的，而不是基于服务的。1、没有增加权限验证。

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

首先我们介绍第一种情况的解决方法，这个很简单，只需要在启动类里面配置过滤器就可以解决。@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做的权限验证。

首先增加过滤器配置：@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

}

}

在启动类中增加配置@Bean

public FilterRegistrationBean filterRegistrationBean() {

FilterRegistrationBean registrationBean = new FilterRegistrationBean();

CorsControllerFilter corsControllerFilter = new CorsControllerFilter();

registrationBean.setFilter(corsControllerFilter);

return registrationBean;

}

但是针对某些请求，他会先请求OPTIONS请求，造成权限验证失败。所以增加拦截器配置，对所有的OPTIONS的请求直接放行，返回200的状态。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配置文件，加载拦截器。@Configuration

public class WebMvcConfiguration extends WebMvcConfigurationSupport{

@Override

public void addInterceptors(InterceptorRegistry registry) {

registry.addInterceptor(new OptionsInterceptor()).addPathPatterns("/**");

}

}

本来以为这样配置了应该是可以了，但是在请求的时候OPTIONS的请求居然还是报跨域的问题，增加拦截器允许跨域配置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的前面registry.addInterceptor(new CrossInterceptor()).addPathPatterns("/**");

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

到此，相信大家对“Spring Cloud项目前后端分离跨域的操作方法”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！