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

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

本章目标jquery

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

构建项目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"app

编写跨域资源请求cors

咱们的跨域配置到目前来讲已经配置完成了,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请求的处理,彻底自定义处理请求路径,可对请求头信息以及请求的域名进行控制。

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

网页地址:git.oschina.net/jnyqy/lessons
Git地址:git.oschina.net/jnyqy/lessons.git

SpringBoot相关系列文章,请访问:目录:SpringBoot学习目录,感谢阅读!

欢迎加入QQ技术交流群,共同进步。

QQ技术交流群

相关文章
相关标签/搜索