Spring Boot对Ajax跨域访问的支持实现

作者在SE305课程中，需要设计一款新时代互联网购票系统，团队使用vue.js前端，Spring MVC的后台架构。开发过程中遇到跨域访问的问题，故写成此博客进行探讨解决方案。主要涉及的话题有：

Spring Boot
AJAX
跨域访问

问题定义

究竟什么是跨域访问？作者引用了MDN对CORS的定义https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

当一个资源从与该资源本身所在的服务器的域或端口不同的域或不同的端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
比如，站点 http://domain-a.com 的某 HTML 页面通过的 src 请求
http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。
出于安全考虑，浏览器会限制从脚本内发起的跨域HTTP请求。例如，XMLHttpRequest 和 Fetch 遵循同源策略。因此，使用
XMLHttpRequest或 Fetch
的Web应用程序只能将HTTP请求发送到其自己的域。为了改进Web应用程序，开发人员要求浏览器厂商允许跨域请求。

下面是简单的流程图：

根本解决思路

客户端和服务器之间使用 CORS 首部字段来处理跨域权限：

也就是说在HTTP request以及response加入CORS对应的首部行字段即可解决。下面讲解在spring下的后台解决方案

实现方案

方案一

在Controller类或其方法上加@CrossOrigin注解

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/Cinema")
public class CinemaController {//Cinema控制器，跨域来源为*即任何来源
}

方案二

在web.xml中配置一个CorsFilter

<filter-mapping><filter-name>CorsFilter</filter-name><url-pattern>/*</url-pattern>
</filter-mapping>

而filter的实现如下

@Component
public class InitCORSFilter extends OncePerRequestFilter {private Logger logger = LoggerFactory.getLogger(InitCORSFilter.class);public InitCORSFilter() {}//表示服务器端允许任意Domain访问请求@Overrideprotected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)throws ServletException, IOException {if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {response.addHeader("Access-Control-Allow-Origin", "*");response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");response.addHeader("Access-Control-Allow-Headers", "origin, content-type, accept, x-requested-with, sid, mycustom, smuser");response.addHeader("Access-Control-Max-Age", "600");    //Max age为10mins}filterChain.doFilter(request, response);}}

方案三(本次项目使用的方法)

本次项目使用spring-boot，可以把CorsFilter作为@Bean加入到@Configuration中即可配置，方便简洁。

@Configuration
public class CorsConfig {private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*");corsConfiguration.addAllowedHeader("*");corsConfiguration.addAllowedMethod("*");return corsConfiguration;}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", buildConfig()); return new CorsFilter(source);}
}//通过任意请求

总结

解决的不二思路就是当捕获到Cors请求(使用Filter实现)时，返回包含特定Header的Response。

Spring Boot对Ajax跨域访问的支持实现相关推荐

spring boot 解决Ajax 跨域问题
Ajax 跨域请求 spring boot 的跨域问题 Ajax 跨域请求spring boot 时前端报错出现跨域错误后端代码 @RequestMapping("/getArtic ...
Spring Boot 对CORS跨域访问的配置
Springboot 对于跨域请求的支持有两种配置方式: 一:注解配置 @CrossOrigin注解可以实现对CORS的启用. @RequestMapping("/get_api" ...
apache ajax 跨域访问,AJAX跨域访问（从Tomcat8到Apache/Nginx）
1.在Tomcat的Root目录下放入如下的文件 apache-tomcat-8.0.12X64\webapps\ROOT clientaccesspolicy.xml文件 crossdomain.x ...
Ajax跨域访问抱错原因：CORS 头缺少 ‘Access-Control-Allow-Origin‘
当Ajax跨域访问,明明已经获取到访问的json数据但是浏览器报错CORS 头缺少 'Access-Control-Allow-Origin' : 解决方式一: 过滤器 package com.xet ...
Jetty Cross Origin Filter解决jQuery Ajax跨域访问的方法
当使用jQuery Ajax post请求时可能会遇到类似这样的错误提示 XMLHttpRequest cannot load http://xxxxxx. Origin http://xxxxxx ...
js Ajax跨域访问
-----------------------index.html <html> <head> <title>JQuery Ajax跨域访问</title&g ...
ie9以下兼容ajax跨域访问，解决ie9以下浏览器ajax请求报error拒绝访问方案解决ie9以下浏览器ajax请求报400问题方案
解决方案如下: 1.ie9以下兼容ajax跨域访问 2.ajax请求开始前添加 jQuery.support.cors = true; 允许跨域 3.ie浏览器设置允许通过域访问数据并且 ur ...
ajax总结(三):ajax跨域访问接口方法汇总
ajax跨域访问接口方法和模板引擎的应用一.学习跨域之前先要了解: 1.同源和跨域的概念 a.同源:协议头.域名.端口全部一样就叫同源; b.跨域:只要协议头,域名,端口任意一个不一样就是跨域. 因 ...
jsonp跨域的缺点ajax缺点,浅析JSONP解决Ajax跨域访问问题的思路详解
前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问 ...
Spring Boot 2.x 跨域问题(多种解决方式)
参考:https://juejin.im/post/5d438becf265da03de3ae29f 什么是跨域首先,我们需要了解一下一个URL是怎么组成的: // 协议 + 域名(子域名 + 主域 ...

Spring Boot对Ajax跨域访问的支持实现

Spring Boot对Ajax跨域访问的支持实现

问题定义

根本解决思路

实现方案

方案一

方案二

方案三(本次项目使用的方法)

总结

Spring Boot对Ajax跨域访问的支持实现相关推荐

最新文章

热门文章