1 跨域的理解

跨域是指:浏览器A服务器B获取的静态资源,包括Html、Css、Js,然后在Js中通过Ajax访问C服务器的静态资源或请求。即:浏览器A从B服务器拿的资源,资源中想访问服务器C的资源。

同源策略是指:浏览器A服务器B获取的静态资源,包括Html、Css、Js,为了用户安全,浏览器加了限制,其中的Js通过Ajax只能访问B服务器的静态资源或请求。即:浏览器A从哪拿的资源,那资源中就只能访问哪。

同源是指:同一个请求协议(如:Http或Https)、同一个Ip、同一个端口,3个全部相同,即为同源。

2 跨域的处理

跨域的这种需求还是有的,因此,W3C组织制定了一个Cross-Origin Resource Sharing规范,简写为Cors,现在这个规范已经被大多数浏览器支持,从而,处理跨域的需求。

Cors需要在后端应用进行配置,因此,是一种跨域的后端处理方式,这么做也容易理解,一个你不认识的源来访问你的应用,自然需要应用进行授权。除了后端处理方式,也有前端的解决方案,如:JSONP,因这里我们主要讲解SpringBoot2.x对Cors的配置,暂不对前端解决方案进行详细说明。

3 跨域的分类

跨域分为以下3种

名称 英文名 说明
简单请求 Simple Request 发起的Http请求符合:
1.无自定义请求头,
2.请求动词为GET、HEAD或POST之一,
3.动词为POST时,Content-Type是application/x-www-form-urlencoded,
multipart/form-data或text/plain之一
预检请求 Preflighted Request 发起的Http请求符合其中之一:
1.包含了自定义请求头,
2.请求动词不是GET、HEAD或POST,
3.动词是POST时, Content-Type不是application/x-www-form-urlencoded,
multipart/form-data或text/plain。 即:简单请求的相反
凭证请求 Requests with Credential 发起的Http请求中带有凭证

4 SpringBoot2.x配置Cors

SpringBoot2.x主要提供了两种方式来支持Cors,如下:

方式 作用范围 说明
@CrossOrigin注解 一个Controller中全部接口或是其中一个特定的接口 配置、定制特定的请求接口
WebMvcConfigurer对象 全部接口 适用于全局配置

4.1 使用@CrossOrigin注解

代码实例

@RestController
@RequestMapping(value = "/api/users")
@CrossOrigin
public class UsersController{ @Autowired
private UsersService usersService; @PostMapping
@CrossOrigin
public User create(@RequestBody User user) {
return userService.save(user);
}
}

其中,@CrossOrigin注解可以使用以下参数

名称 类型 范围 必填 请求头字段
value String数组 类或方法 Access-Control-Allow-Origin
origins String数组 类或方法 是,同value,可以二选一 Access-Control-Allow-Origin
methods String数组 类或接口 Access-Control-Allow-Methods
maxAge long 类或接口 Access-Control-Max-Age
allowCredentials String 类或接口 Access-Control-Allow-Credentials
allowedHeaders String数组 类或接口 Access-Control-Request-Headers
exposedHeaders String数组 类或接口 Access-Control-Expose-Headers
  • 备注说明
  1. value、origins属性:配置允许访问的源,如: http://anxminise.cc*表示允许全部的域名
  2. methods属性:配置跨域请求支持的方式,如:GET、POST,且一次性返回全部支持的方式
  3. maxAge属性:配置预检请求的有效时间, 单位是秒,表示:在多长时间内,不需要发出第二次预检请求
  4. allowCredentials属性:配置是否允许发送Cookie,用于 凭证请求, 默认不发送cookie
  5. allowedHeaders属性:配置允许的自定义请求头,用于 预检请求
  6. exposedHeaders属性:配置响应的头信息, 在其中可以设置其他的头信息,不进行配置时, 默认可以获取到Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma字段

4.2 使用WebMvcConfigurer对象

代码实例

@Configuration
public class MyConfiguration { @Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT","PATCH")
.maxAge(3600);
}
};
}
}

其中,通过相应的方法实现跨域请求的配置

方法类 方法名称 必填 请求头字段 说明
CorsRegistry addMapping 无, 非Cors属性,
属于SpringBoot配置
配置支持跨域的路径
CorsRegistration allowedOrigins Access-Control-Allow-Origin 配置允许的源
CorsRegistration allowedMethods Access-Control-Allow-Methods 配置支持跨域请求的方法,
如:GET、POST,一次性返回
CorsRegistration maxAge Access-Control-Max-Age 配置预检请求的有效时间
CorsRegistration allowCredentials Access-Control-Allow-Credentials 配置是否允许发送Cookie, 用于 凭证请求
CorsRegistration allowedHeaders Access-Control-Request-Headers 配置允许的自定义请求头, 用于 预检请求
CorsRegistration exposedHeaders Access-Control-Expose-Headers 配置响应的头信息,
在其中可以设置其他的头信息

SpringBoot2.x配置Cors跨域的更多相关文章

  1. Web APi之手动实现JSONP或安装配置Cors跨域(七)

    前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...

  2. Web API 实现JSONP或者安装配置Cors跨域

    前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...

  3. Flask配置Cors跨域

    1 跨域的理解 跨域是指:浏览器A从服务器B获取的静态资源,包括Html.Css.Js,然后在Js中通过Ajax访问C服务器的静态资源或请求.即:浏览器A从B服务器拿的资源,资源中想访问服务器C的资源 ...

  4. SpringBoot配置Cors跨域请求

    一.同源策略简介 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[or ...

  5. tomcat7.0配置CORS(跨域资源共享)

    平时我们做前台页面时可能会遇到浏览器以下提示(浏览器控制台): 已阻止跨源请求:同源策略禁止读取位于 http://xxx.xxx.com 的远程资源.(原因:CORS 头缺少 'Access-Con ...

  6. egg.js 配置cors跨域

    1.egg简述 Egg.js,为企业级框架和应用而生,是阿里开源的企业级 Node.js 框架. 2.特点 Egg 奉行『约定优于配置』,按照一套统一的约定进行应用开发,团队内部采用这种方式可以减少开 ...

  7. GeoServer配置CORS(跨域资源共享)

    当前台页面请求WMS可能会遇到浏览器以下提示(浏览器控制台): 已阻止跨源请求:同源策略禁止读取位于 http://xxx.xxx.com 的远程资源.(原因:CORS 头缺少 'Access-Con ...

  8. SpringBoot2.0(五) CORS跨域

    部分跨域 @CrossOrigin注解支持类级别,方法级别添加.可以在controller类或者方法上添加,支持部分接口跨域.在两者上都添加时,方法级别的覆盖类级别的. 属性 说明 origins 允 ...

  9. Springboot 配置cors 跨域的几种方法

    作记录用 请参考https://blog.csdn.net/lizc_lizc/article/details/81155895 第一种: 在每个controller上添加 @CrossOrigin ...

随机推荐

  1. python发邮件报错SMTP AUTH extension not supported by server."

    在login(username,password)之前添加 smtp.ehlo() smtp.starttls() d ={'smtp_server': '','smtp_email': '','sm ...

  2. Java——判断回文

    package basic; import java.util.Scanner; public class Palindrome{ public static boolean isPalindrome ...

  3. 微信小程序 scroll-view 横向滚动条 隐藏无效

    看了许多网上教程说是添加如下样式可以解决,我加入到组件wxss中无效,加入全局wxss生效. 添加css代码如下: ::-webkit-scrollbar { ; ; color: transpare ...

  4. 【JZOJ5739】【20190706】毒奶

    题目 有\(n\)个现实城市,另有\(n\)个幻想城市 原图中在现实城市存在\(m\)条边,在幻想城市存在\(m-1-n\)条边 一个排列是合法的当且进当显示城市 \(i\) 向幻想城市 \(p_i\ ...

  5. 三天精通Vue--学前摘要

    Vue Vue是一个前端框架,中文学习教程https://cn.vuejs.org/v2/guide/components.html 学习的前提:一点的 HTML+CSS+js node.js是前端的 ...

  6. haproxy 配置文件详解 之 global

    配置示例: global log 127.0.0.1 local0 info maxconn user nobody group nobody daemon nbproc pidfile /usr/l ...

  7. [SDOi2012]Longge的问题(洛谷 2303)

    题目描述 Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, N)(1<=i <=N). 输入格式 一个整数,为N. ...

  8. JVM系列之一:JVM架构

    1.简介 Java平台可分为两部分,即Java虚拟机(Java virtual machine,JVM)和Java API类库. JVM是Java Virtual Machine(Java虚拟机)的缩 ...

  9. express框架,使用 static 访问 public 内静态文件

    使用 express 生成 node 服务器后,我们需要访问放在public文件夹内的静态文件,如上传的图片 我们需要在app.js中添加配置项: app.use('/public',express. ...

  10. 【07月03日】A股ROE最高排名

    个股滚动ROE = 最近4个季度的归母净利润 / ((期初归母净资产 + 期末归母净资产) / 2). 查看更多个股ROE最高排名 兰州民百(SH600738) - ROE_TTM:86.45% - ...