第二十五章：SpringBoot添加支持CORS跨域访问

CORS（Cross-Origin Resource Sharing）"跨域资源共享"，是一个W3C标准，它允许浏览器向跨域服务器发送Ajax请求，打破了Ajax只能访问本站内的资源限制，CORS在很多地方都有被使用，微信支付的JS支付就是通过JS向微信服务器发送跨域请求。开放Ajax访问可被跨域访问的服务器大大减少了后台开发的工作，前后台工作也可以得到很好的明确以及分工，下面我们就看讲一下如何让你的SpringBoot项目支持CORS跨域。

本章目标

基于SpringBooot项目搭建可以站外Ajax请求访问的跨域资源服务器。

构建项目

使用IDEA开发工具创建一个SpringBoot项目，预先添加Web依赖即可，项目结构如下图1所示：

图1

CORSConfiguration

我们只需要添加项目Web依赖就可以了，下面我们开始添加CORS的配置信息，我们创建一个CORSConfiguration配置类，如下图2所示：

图2

上图2内我们的CORSConfiguration配置类继承了WebMvcConfiugrationAdaper父类并且重写了addCorsMappings方法，我们来简单介绍下我们的配置信息

addMapping：配置可以被跨域的路径，可以任意配置，可以具体到直接请求路径。
allowedMethods：允许所有的请求方法访问该跨域资源服务器，如：POST、GET、PUT、DELETE等。
allowedOrigins：允许所有的请求域名访问我们的跨域资源，可以固定单条或者多条内容，如："http://www.baidu.com"，只有百度可以访问我们的跨域资源。
allowedHeaders：允许所有的请求header访问，可以自定义设置任意请求头信息，如："X-YAUTH-TOKEN"

编写跨域资源请求

我们的跨域配置到目前来说已经配置完成了，SpringBoot已经为我们内置相关配置，我们只需要重写方法修改部分参数即可，下面我们来创建一个测试跨域资源的控制器，如下图3所示：

图3

在图3内的IndexController控制器内，我们仅仅添加了一个测试返回文本的内容，当然这个控制器可以处理任意业务逻辑。

测试跨域请求

我们在项目外创建一个index.html页面（上传码云后会在resources目录找到），页面内添加部分jquery代码，如下图4所示：

图4

我们引用了在线的jquery代码，并且在页面加载的时候为id=cors的输入按钮绑定点击事件，点击按钮时就会请求我们的/cors跨域资源路径，下面我们来运行项目测试下跨域请求，项目运行日志如下图5所示：

图5

可以看到上图5内项目启动时SpringBoot内置的SpringMVC已经把我们的/cors添加到映射集合，我们打开之前编写的index.html网页，界面效果如下图6所示：

图6

接下来我们点击“CORS跨域测试”按钮，查看下效果，如下图7所示：

图7

上图7内可以看到，界面给我返回了我们/cors路径返回的文本内容，证明我们的ajax请求完美的通过跨域资源库访问了开放跨域的资源路径。

下面我们来把我们的跨域配置注释掉，重启项目后刷新index.html再次点击“CORS跨域测试”按钮，界面输出效果如下图8所示：

图8

可以看到我们点击后并没有获取到返回内容，而是给我们提示了异常，告诉我们无法加载资源。

本章总结

本章简单讲解了SpringBoot项目对CORS请求的处理，完全自定义处理请求路径，可对请求头信息以及请求的域名进行控制。

本章代码已经上传到码云：

SpringBoot配套源码地址：https://gitee.com/hengboy/spring-boot-chapter

SpringCloud配套源码地址：https://gitee.com/hengboy/spring-cloud-chapter

SpringBoot相关系列文章请访问：目录：SpringBoot学习目录

QueryDSL相关系列文章请访问：QueryDSL通用查询框架学习目录

SpringDataJPA相关系列文章请访问：目录：SpringDataJPA学习目录

SpringBoot相关文章请访问：目录：SpringBoot学习目录，感谢阅读！

  欢迎微信扫码加入知识星球，恒宇少年带你走以后的技术道路！！！

知识星球 - 恒宇少年