Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十二):解决跨域问题
什么是跨域?
同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。 同源策略是浏览器安全的基石。
如果一个请求地址里面的协议、域名和端口号都相同,就属于同源。
举个栗子
判断下面URL是否和 http://www.a.com/a/a.html 同源
- http://www.a.com/b/b.html 同源
- http://www.b.com/a/a.html 不同源,域名不相同
- https://www.a.com/b/b.html 不同源,协议不相同
- http://www.a.com:8080/b/b.html 不同源,端口号不相同
依据浏览器同源策略,非同源脚本不可操作其他源下面的对象。想要操作其他源下的对象就需要跨域。
综上所述,在同源策略的限制下,非同源的网站之间不能发送 AJAX
请求。如有需要,可通过降域或其他技术实现。
CORS 技术
为了解决浏览器跨域问题,W3C
提出了跨源资源共享方案,即 CORS
(Cross-Origin Resource Sharing)。
CORS
可以在不破坏即有规则的情况下,通过后端服务器实现 CORS
接口,就可以实现跨域通信。
CORS
将请求分为两类:简单请求和非简单请求,分别对跨域通信提供了支持。
1、简单请求
在CORS
出现前,发送HTTP
请求时在头信息中不能包含任何自定义字段,且 HTTP
头信息不超过以下几个字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
(仅限于 [application/x-www-form-urlencoded
、multipart/form-data
、text/plain
] 类型)
一个简单请求的例子:
GET /test HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, sdch, br
Origin: http://www.test.com
Host: www.test.com
对于简单请求,CORS
的策略是请求时在请求头中增加一个Origin
字段,服务器收到请求后,根据该字段判断是否允许该请求访问。
- 如果允许,则在 HTTP 头信息中添加
Access-Control-Allow-Origin
字段,并返回正确的结果 ; - 如果不允许,则不在 HTTP 头信息中添加
Access-Control-Allow-Origin
字段 。
除了上面提到的 Access-Control-Allow-Origin
,还有几个字段用于描述 CORS
返回结果 :
Access-Control-Allow-Credentials
: 可选,用户是否可以发送、处理cookie
;Access-Control-Expose-Headers
:可选,可以让用户拿到的字段。有几个字段无论设置与否都可以拿到的,包括:Cache-Control
、Content-Language
、Content-Type
、Expires
、Last-Modified
、Pragma
。
2、非简单请求
对于非简单请求的跨源请求,浏览器会在真实请求发出前,增加一次OPTION
请求,称为预检请求(preflight request
)。预检请求将真实请求的信息,包括请求方法、自定义头字段、源信息添加到 HTTP 头信息字段中,询问服务器是否允许这样的操作。
例如一个GET
请求:
OPTIONS /test HTTP/1.1
Origin: http://www.test.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: X-Custom-Header
Host: www.test.com
与 CORS
相关的字段有:
- 请求使用的
HTTP
方法Access-Control-Request-Method
- 请求中包含的自定义头字段
Access-Control-Request-Headers
服务器收到请求时,需要分别对 Origin
、Access-Control-Request-Method
、Access-Control-Request-Headers
进行验证,验证通过后,会在返回 HTTP
头信息中添加 :
Access-Control-Allow-Origin: http://www.test.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
他们的含义分别是:
- Access-Control-Allow-Methods: 真实请求允许的方法
- Access-Control-Allow-Headers: 服务器允许使用的字段
- Access-Control-Allow-Credentials: 是否允许用户发送、处理 cookie
- Access-Control-Max-Age: 预检请求的有效期,单位为秒。有效期内,不会重复发送预检请求
当预检请求通过后,浏览器才会发送真实请求到服务器。这样就实现了跨域资源的请求访问。
项目添加跨域支持
1.添加配置类
在 kitty-boot 下添加跨域配置,如下图所示。
CorsConfig.java
package com.louis.kitty.boot.config; import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration
public class CorsConfig implements WebMvcConfigurer { @Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 允许跨域访问的路径
.allowedOrigins("*") // 允许跨域访问的源
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 允许请求方法
.maxAge(168000) // 预检间隔时间
.allowedHeaders("*") // 允许头部设置
.allowCredentials(true); // 是否发送cookie
}
}
2.修改过滤器
2.1 Shiro 导致的跨域问题
按照正常逻辑,添加了上面的跨域配置类就可以实现跨域支持了。然而,我们使用了 Shiro 就不一样了。我们上面讲到,对于非简单的跨域请求,会事先发起一个OPTION类型的预检请求,只有预检请求成功才会发起真正的请求,而这个预检请求是不带 token 的,这就意味着这个预检请求会被 shiro 过滤器拦截并在 token 校验失败之后返回失败信息,从而不会再发起真正的请求。
2.2 跨域解决方案
解决思路很简单,既然是因为预检请求失败导致的问题,那就让预检请求自动放行就可以了。
OAuth2Filter.java
2.3 测试效果
我的后端服务端口是8088,前端端口是8090,所以也是跨域访问,启动页面,数据加载成功。
源码下载
后端:https://gitee.com/liuge1988/kitty
前端:https://gitee.com/liuge1988/kitty-ui.git
作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/
版权所有,欢迎转载,转载请注明原文作者及出处。
Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十二):解决跨域问题的更多相关文章
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十五):Spring Security 版本
在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 到目前为止,我们使用的权限认证框架是 Shiro,虽然 Shiro ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十一):服务网关(Zuul)
在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 前面我们通过Ribbon或Feign实现了微服务之间的调用和负载均衡 ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十三):配置中心(Config、Bus)
在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 如今微服务架构盛行,在分布式系统中,项目日益庞大,子项目日益增多,每 ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十):服务熔断(Hystrix、Turbine)
在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 雪崩效应 在微服务架构中,由于服务众多,通常会涉及多个服务层级的调用,而一旦基 ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十二):链路追踪(Sleuth、Zipkin)
在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 在微服务架构中,随着业务发展,系统拆分导致系统调用链路愈发复杂,一个 ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十四):权限控制(Shiro 注解)
在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 当前,我们基于导航菜单的显示和操作按钮的禁用状态,实现了页面可见性和 ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二):数据库设计
数据库设计 系统主要包含用户(sys_user).组织(sys_dept).角色(sys_role).菜单(sys_menu).角色组织(sys_role_dept).角色菜单(sys_role_me ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(一):Kitty 系统介绍
在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 温馨提示: 有在演示环境删除数据的童鞋们,如果可以的话,麻烦动动小指,右键头像 ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十九):服务消费(Ribbon、Feign)
技术背景 上一篇教程中,我们利用Consul注册中心,实现了服务的注册和发现功能,这一篇我们来聊聊服务的调用.单体应用中,代码可以直接依赖,在代码中直接调用即可,但在微服务架构是分布式架构,服务都运行 ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十八):注册中心(Spring Cloud Consul)
什么是 Consul Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其它分布式服务注册与发现的方案,Consul 的方案更“一站式”,内置了服务注册与 ...
随机推荐
- python基础之Day7part1集合
一.集合 1.定义 s=set() 2.特点 每个元素必须是不可变类型,但集合本身是可变类型的,有add和remove等功能 3.用途 去重(原理:for循环if判断元素是否已存在,不存在则追加) 关 ...
- linux学习 (Linux就该这么学)
明天周五了,7点准时上课,加油努力学习,12月份要考试了,心里没有底,加油吧!感觉要学的真多,! redhat7,,安装图形界面 yum install -y
- ef core中使用code first
这个配置还是挺坑,照这个一步步做倒是可以 https://www.cnblogs.com/chenzhaoyu/p/7831980.html
- linux python 安装到用户目录
在公司服务器中,python可能存在多个版本,而且python中的包也有多个不同版本,由于不同猿的需求不同,经常会引起程序冲突,影响工作效率.因此,给大家分享一个在没有root权限时,将python安 ...
- javascript字符串方法总结
一.单引号字符串内部可以使用双引号,双引号字符串内部也可以使用单引号 "hello 'world'" 'welcome "to" js' 二.多行和转义 如果要 ...
- pyhon_day1 格式化输出
格式化输出 我们在写Python的在很多时候输出的内容需要规定格式的,这样就引入到了格式化输出 定义: 盗用下大咖的例子: ------------ info of alex ----------- ...
- select和其元素options
普通的select形式为: <select> <option>选中元素1</option> <option>选中元素2</option> & ...
- Linux连不上校园网怎么办?
原本,在我们学校我只要连上WiFi打开浏览器, 它就会自动重定向到校园网登录的界面.但是今天浏览器并没有自己打开登录页面,一直在加载.于是我想直接登录路由器,在地址栏输入192.168.0.1,结果它 ...
- 9.3AspectJ
1.1 介绍 AspectJ是一个基于Java语言的AOP框架 Spring2.0以后新增了对AspectJ切点表达式支持 @AspectJ 是AspectJ1.5新增功能,通过JDK5注解技术,允许 ...
- redis之一初识redis
本文主要围绕以下几点进行阐述: 1.什么是redis? 2.为什么要使用redis呢? 3.redis的一些基本配置 4.redis的缺点? 正文: 1.什么是redis? Redis是一款内存高速缓 ...