什么是跨域?

同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。 同源策略是浏览器安全的基石。

如果一个请求地址里面的协议、域名和端口号都相同,就属于同源。

举个栗子

判断下面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-datatext/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-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma 。

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

服务器收到请求时,需要分别对 OriginAccess-Control-Request-MethodAccess-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 实现权限管理系统 后端篇(十二):解决跨域问题的更多相关文章

  1. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十五):Spring Security 版本

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 到目前为止,我们使用的权限认证框架是 Shiro,虽然 Shiro ...

  2. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十一):服务网关(Zuul)

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 前面我们通过Ribbon或Feign实现了微服务之间的调用和负载均衡 ...

  3. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十三):配置中心(Config、Bus)

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 如今微服务架构盛行,在分布式系统中,项目日益庞大,子项目日益增多,每 ...

  4. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十):服务熔断(Hystrix、Turbine)

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 雪崩效应 在微服务架构中,由于服务众多,通常会涉及多个服务层级的调用,而一旦基 ...

  5. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十二):链路追踪(Sleuth、Zipkin)

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 在微服务架构中,随着业务发展,系统拆分导致系统调用链路愈发复杂,一个 ...

  6. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十四):权限控制(Shiro 注解)

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 当前,我们基于导航菜单的显示和操作按钮的禁用状态,实现了页面可见性和 ...

  7. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二):数据库设计

    数据库设计 系统主要包含用户(sys_user).组织(sys_dept).角色(sys_role).菜单(sys_menu).角色组织(sys_role_dept).角色菜单(sys_role_me ...

  8. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(一):Kitty 系统介绍

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 温馨提示: 有在演示环境删除数据的童鞋们,如果可以的话,麻烦动动小指,右键头像 ...

  9. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十九):服务消费(Ribbon、Feign)

    技术背景 上一篇教程中,我们利用Consul注册中心,实现了服务的注册和发现功能,这一篇我们来聊聊服务的调用.单体应用中,代码可以直接依赖,在代码中直接调用即可,但在微服务架构是分布式架构,服务都运行 ...

  10. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十八):注册中心(Spring Cloud Consul)

    什么是 Consul Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其它分布式服务注册与发现的方案,Consul 的方案更“一站式”,内置了服务注册与 ...

随机推荐

  1. python基础之Day7part1集合

    一.集合 1.定义 s=set() 2.特点 每个元素必须是不可变类型,但集合本身是可变类型的,有add和remove等功能 3.用途 去重(原理:for循环if判断元素是否已存在,不存在则追加) 关 ...

  2. linux学习 (Linux就该这么学)

    明天周五了,7点准时上课,加油努力学习,12月份要考试了,心里没有底,加油吧!感觉要学的真多,! redhat7,,安装图形界面  yum install -y

  3. ef core中使用code first

    这个配置还是挺坑,照这个一步步做倒是可以 https://www.cnblogs.com/chenzhaoyu/p/7831980.html

  4. linux python 安装到用户目录

    在公司服务器中,python可能存在多个版本,而且python中的包也有多个不同版本,由于不同猿的需求不同,经常会引起程序冲突,影响工作效率.因此,给大家分享一个在没有root权限时,将python安 ...

  5. javascript字符串方法总结

    一.单引号字符串内部可以使用双引号,双引号字符串内部也可以使用单引号 "hello 'world'" 'welcome "to" js' 二.多行和转义 如果要 ...

  6. pyhon_day1 格式化输出

    格式化输出 我们在写Python的在很多时候输出的内容需要规定格式的,这样就引入到了格式化输出 定义: 盗用下大咖的例子: ------------ info of alex ----------- ...

  7. select和其元素options

    普通的select形式为: <select> <option>选中元素1</option> <option>选中元素2</option> & ...

  8. Linux连不上校园网怎么办?

    原本,在我们学校我只要连上WiFi打开浏览器, 它就会自动重定向到校园网登录的界面.但是今天浏览器并没有自己打开登录页面,一直在加载.于是我想直接登录路由器,在地址栏输入192.168.0.1,结果它 ...

  9. 9.3AspectJ

    1.1 介绍 AspectJ是一个基于Java语言的AOP框架 Spring2.0以后新增了对AspectJ切点表达式支持 @AspectJ 是AspectJ1.5新增功能,通过JDK5注解技术,允许 ...

  10. redis之一初识redis

    本文主要围绕以下几点进行阐述: 1.什么是redis? 2.为什么要使用redis呢? 3.redis的一些基本配置 4.redis的缺点? 正文: 1.什么是redis? Redis是一款内存高速缓 ...