1、CORS简述

  CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源(协议 + 域名 + 端口)服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

  CORS需要浏览器和服务器同时支持。它的通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

  因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

2、基本流程

  浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

  浏览器发出CORS简单请求,只需要在头信息之中增加一个Origin字段。

  浏览器发出CORS非简单请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

  浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

  只要同时满足以下两大条件,就属于简单请求。

  (1)请求方法是以下三种方法之一:HEAD、GET、POST

  (2)HTTP的头信息不超出以下几种字段:Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type(只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)

3、具体实现(spring boot)

// 描述: 使用Filter处理跨域请求,即CORS(跨来源资源共享)
@Configuration
public class SimpleCORS{
// 设置 跨域请求参数,处理跨域请求
@Bean
public CorsFilter corsFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
} private CorsConfiguration buildConfig(){
CorsConfiguration corsConfiguration = new CorsConfiguration(); // 允许跨域访问的域名
corsConfiguration.addAllowedOrigin("*");
// 请求头
corsConfiguration.addAllowedHeader("*");
// 请求方法
corsConfiguration.addAllowedMethod(HttpMethod.DELETE);
corsConfiguration.addAllowedMethod(HttpMethod.POST);
corsConfiguration.addAllowedMethod(HttpMethod.GET);
corsConfiguration.addAllowedMethod(HttpMethod.PUT);
corsConfiguration.addAllowedMethod(HttpMethod.DELETE);
corsConfiguration.addAllowedMethod(HttpMethod.OPTIONS);
// 预检请求的有效期,单位为秒。
corsConfiguration.setMaxAge(3600L);
// 是否支持安全证书
corsConfiguration.setAllowCredentials(true); return corsConfiguration;
}
}

  配置项解释:

  1、Access-Control-Allow-Origin:该字段必填。它的值要么是请求时Origin字段的具体值,要么是一个*,表示接受任意域名的请求。

  2、Access-Control-Allow-Methods:该字段必填。它的值是逗号分隔的一个具体的字符串或者*,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

  3、Access-Control-Expose-Headers:该字段可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。

  4、Access-Control-Allow-Credentials:该字段可选。它的值是一个布尔值,表示是否允许发送Cookie,默认情况下,不发生Cookie(即false)。对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json,这个值只能设为true。如果服务器不要浏览器发送Cookie,删除该字段即可。

  5、Access-Control-Max-Age:该字段可选,用来指定本次预检请求的有效期,单位为秒。在有效期间,不用发出另一条预检请求。

  注意:CORS请求发送Cookie时,Access-Control-Allow-Origin只能是与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

CORS跨域资源共享总结的更多相关文章

  1. CORS跨域资源共享

    CORS(跨域资源共享)跨域问题及解决 当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Co ...

  2. CORS跨域资源共享你该知道的事儿

    "唠嗑之前,一些客套话" CORS跨域资源共享,这个话题大家一定不陌生了,吃久了大转转公众号的深度技术好文,也该吃点儿小米粥溜溜胃里的缝儿了,今天咱们就再好好屡屡CORS跨域资源共 ...

  3. 在ASP.NET Web API中实现CORS(跨域资源共享)

    默认情况下,是不允许网页从不同的域访问服务器资源的,访问遵循"同源"策略的原则. 会遇到如下的报错: XMLHttpRequest cannot load http://local ...

  4. django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享

    一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...

  5. 跨域漏洞丨JSONP和CORS跨域资源共享

    进入正文之前,我们先来解决个小问题,什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 跨域常见的两种方式,分别是JSONP和CORS. 今天i ...

  6. 浅谈跨域问题,CORS跨域资源共享

    1,何为跨域? 在理解跨域问题之前,你先要了解同源策略和URL,简单叙述: 1)同源策略 三同:协议相同,域名相同,端口相同: 目的:保证用户信息安全,防止恶意网站窃取数据.同源策略是必须的,否则co ...

  7. Node.js实现CORS跨域资源共享

    什么是CORS CORS(Cross-origin resource sharing),跨域资源共享,是一份浏览器技术的规范,用来避开浏览器的同源策略 简单来说就是解决跨域问题的除了jsonp外的另一 ...

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

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

  9. CORS(跨域资源共享)详解及与JSONP的对比

    上篇讲解的JSONP的跨域请求方式,但是在浏览器的支持及请求方式上有局限性,接下来将介绍一种新的跨域请求方式CORS. CORS是一个W3C标准,全称是"跨域资源共享"(Cross ...

  10. CORS跨域资源共享简述

    什么是CORS? 默认情况下,为预防某些而已行为,浏览器的XHR对象只能访问来源于同一个域中的资源.但是我们在日常实际开发中,常常会遇到跨域请求的需求,因此就出现了一种跨域请求的方案:CORS(Cro ...

随机推荐

  1. Java abstract 理解和学习

    /** * <html> * <body> * <P> Copyright JasonInternational Since 1994 https://github ...

  2. 关于MVC接收Ajax调用无法访问的问题

    例如:下面代码有两个int类型的参数,如果Ajax调用时没有在data属性中为其赋值,AJAX会出500异常. public JsonResult GetList(int pageIndex, int ...

  3. Windows 7 下安装 docker

    Windows 7 下需要安装docker toolbox即可(里面打包了docker.oracle virtualbox.Git) 1. 下载 1. 下载路径https://github.com/d ...

  4. 自学Python编程的第六天(最后代码有更好的请告诉我)----------来自苦逼的转行人

    2019-09-16-23:09:06 自学Python的第六天,也是写博客的第六天 今天学的内容是有关dict字典的用法 看视频加上练习,目前还没遇到有难点,但是感觉很不好的样子 没有难点以后突然出 ...

  5. json_rpc_2 implementation

    https://stackoverflow.com/questions/52670255/flutter-json-rpc-2-implementation import 'dart:convert' ...

  6. js继承(十)

    一.原型链继承[子构造函数的原型对象是父构造函数的实例][对原型属性和方法的继承]1.每个构造函数[prototype]都有一个原型对象,原型对象中都包含一个指向构造函数的指针[constructor ...

  7. maven下载jar demo

    pom.xml <?xml version="1.0"?> <project xmlns="http://maven.apache.org/POM/4. ...

  8. MySQL DataType--浮点数(Floating-Point Types)学习

    浮点数(Floating-Point Types) MySQL支持两种浮点数类型来表示近似值:1.FLOAT,单精度浮点数,使用4字节存储,存储数据范围3.402823466E+38 - -1.175 ...

  9. Ubuntu安装32位程序兼容包

    有的交叉编译工具链是32位的,经常会遇到安装完成之后提示好不到,这时候需要安装32位兼容程序,使用以下命令安装: sudo apt-get update sudo apt install gcc-mu ...

  10. WSL quick overview

    简介 WSL,是Windows Subsystem for Linux的缩写,字面意义上理解就是WIndows下的Linux子系统.WSL 由Microsoft Windows内核团队创建,目前如果最 ...