前后端分离如何使用spring boot处理跨域请求
发布日期:2021-06-29 15:35:41 浏览次数:2 分类:技术文章

本文共 4213 字,大约阅读时间需要 14 分钟。

前后端分离如何使用spring boot处理跨域请求

一、预备知识

之前的是传统的MVC的设计模式,而目前大都是前后端分离的设计模式。

MVC的方式:

  • 客户端请求
  • 服务器端的servlet或者controller接收请求(后端控制路由与渲染页面)
  • 调用service,dao代码完成业务逻辑
  • 返回jsp
  • jsp展现一些动态的代码

前后端分离的方式:

  • 游览器发送请求
  • 直接打到html页面(前端控制路由与渲染页面,整个页面开发的权重前移)
  • html页面负责调用游览器端接口产生的数据(通过ajax后台返回json格式数据)
  • 填充html,展现动态效果,在页面上进行解析并操作DOM。

但是前后端分离模式的设计会遇到跨域问题,而跨域问题要明确以下3点:

  • 跨域只存在于游览器端, 不存在java/python/node.js等环境
  • 跨域请求能发送出去,服务器端能收到请求并正常返回结果,只是结果被游览器给拦截了
  • 而之所以会跨域,是因为受到了同源策略的限制,同源策略要求源相同才能正常进行通信,即协议、域名、端口号都完全一致。

浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略,否则就是跨域的HTTP请求,默认情况下是被禁止的。换句话说,浏览器安全的基石是同源策略。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

二、什么是COR

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing),允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制,如果浏览器支持CORS、并且判断Origin通过的话,就会允许XMLHttpRequest发起跨域请求。

CORS Header

  • Access-Control-Allow-Origin: http://www.xxx.com
  • Access-Control-Max-Age:86400
  • Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT, DELETE
  • Access-Control-Allow-Headers: content-type
  • Access-Control-Allow-Credentials: true

含义解释:

CORS Header属性 解释
Access-Control-Allow-Origin 允许http://www.xxx.com域(自行设置,这里只做示例)发起跨域请求
Access-Control-Max-Age 设置在86400秒不需要再发送预校验请求
Access-Control-Allow-Methods 设置允许跨域请求的方法
Access-Control-Allow-Headers 允许跨域请求包含content-type
Access-Control-Allow-Credentials 设置允许Cookie

三、spring boot跨域请求解决方式

方法一、采用注解@CrossOrigin

Controller层在需要跨域的类或者方法上加上该注解即可

@RestController@CrossOrigin@RequestMapping("/situation")public class SituationController extends PublicUtilController {
@Autowired private SituationService situationService; // log日志信息 private static Logger LOGGER = Logger.getLogger(SituationController.class);

但这种方式导致需要在每一个的Controller上都需要添加,很麻烦。那么可以创建一个Controller的公共父类(PublicUtilController),让别的所有controller继承这个父类。

@CrossOriginpublic class PublicUtilController {
/** * 公共分页参数整理接口 * * @param currentPage * @param pageSize * @return */ public PageInfoUtil proccedPageInfo(String currentPage, String pageSize) {
/* 分页 */ PageInfoUtil pageInfoUtil = new PageInfoUtil(); try {
/* * 将字符串转换成整数,有风险, 字符串为a,转换不成整数 */ pageInfoUtil.setCurrentPage(Integer.valueOf(currentPage)); pageInfoUtil.setPageSize(Integer.valueOf(pageSize)); } catch (NumberFormatException e) {
} return pageInfoUtil; }

SpringMVC使用@CrossOrigin使用场景要求

  • jdk1.8+
  • Spring4.2+

方法二、处理跨域请求的configuration

增加一个配置类,CrossOriginConfig.java。继承WebMvcConfigurerAdapter或者实现WebMvcConfigurer接口,其他都不用管,项目启动时,会自动读取配置。

import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; /** * AJAX请求跨域 */@Configurationpublic class CorsConfig extends WebMvcConfigurerAdapter {
static final String ORIGINS[] = new String[] {
"GET", "POST", "PUT", "DELETE" }; @Override public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS).maxAge(3600); }

方法三、采用过滤器(filter)的方式

同方法二加配置类,增加一个CORSFilter 类,并实现Filter接口即可,其他都不用管,接口调用时,会过滤跨域的拦截。

@Componentpublic class CORSFilter implements Filter {
@Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
HttpServletResponse res = (HttpServletResponse) response; res.addHeader("Access-Control-Allow-Credentials", "true"); res.addHeader("Access-Control-Allow-Origin", "*"); res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN"); if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
response.getWriter().println("ok"); return; } chain.doFilter(request, response); } @Override public void destroy() {
} @Override public void init(FilterConfig filterConfig) throws ServletException {
}}

转载地址:https://codingchaozhang.blog.csdn.net/article/details/111880358 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:【Leetcode刷题篇】leetcode283 移动零
下一篇:【Leetcode刷题篇】leetcode312 戳气球

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2024年04月08日 18时10分23秒