CORS跨域资源共享

简介: CORS跨域资源共享

一、为什么需要跨域方案

1995年Netscape公司在浏览器中引入中了同源策略,最初其含义是A网页设置的cookie,B网页不能打开,为了保证用户的信息安全,防止被恶意的网站窃取用户的数据。

这个是浏览器中十分重要的策略,后来基本上所有的浏览器都实现了同源策略。虽然保证了浏览器的安全,但是在实际使用中也限制了一些需要进行跨域的使用场景,例如单点登录,这时候就需要有完善的跨域方案。

二、什么是CORS

CORS是Cross-origin resource sharing,跨域资源共享,是一个W3C的标准,一个常用的跨域共享方案。

目前Ajax请求只允许同源访问,不允许跨域访问,而CORS方案允许浏览器向跨源服务器发出XMLHttpRequest请求,CORS需要浏览器和服务器同时配合进行支持。

简单的理解,CORS方案完全由浏览器进行操作,用户无感,在发起请求的时候判断是跨域的请求会自动添加一些附加头信息,而后端的服务器识别并添加对这类请求的支持,CORS针对不同的请求类型有不同的请求方式,一是simple  request,二是not-so-simple request。

符合以下两种情况的请求是simple request

1、请求的方法是以下三种方法之一。

  • HEAD
  • GET
  • POST

2、HTTP header不超出以下几个字段

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

超出这两种情况的都属于not-so-simple-request。

三、simple request

针对simple request,在发起请求以后,浏览器判断是跨域的请求以后会自动在请求header中添加Origin字段, 本次请求来自哪个源,注意是否同源是根据“协议+域名+端口”三者来判断的。

服务端接受到请求以后需要查看Origin字段的值判断属于哪个源,是否允许对于这个源的访问请求。如果允许请求的话,那么响应中的header会出现以下这几个字段:

Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Allow-Credentials
Content-Type

其中
Access-Control-Allow-Origin、Content-Type是必须的字段,Access-Control-Allow-Origin字段说明允许来自某个源的跨域请求,它的值要么是请求时Origin字段的值,要么是一个*(设置为*的情况下,无法跨域获取cookie),表示接受任意域名的请求。


Access-Control-Allow-Credentials字段可选,代表是否允许浏览器发送cookie,默认情况下不允许,若需要允许则设置为true,特别说明,浏览器客户端发起XMLHttpRequest的时候需要同步设置withCredentials属性为true。


Access-Control-Expose-Headers属于可选字段,CORS请求XMLHttpRequest对象的getResponseHeader方法只能获取到Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma这几个字段,其他的header字段无法获取,若要获取其他字段,则将字段名设置在Access-Control-Expose-Headers字段中。

四、not-so-simple-request

针对not-so-simple-request,例如DELETE请求,浏览器如果发现这种请求,那么会先发起一个OPTIONS请求,表示这个请求是用来进行询问的,其中header中会有以下字段:

  • Origin
    表示请求来自哪个源。
  • Access-Control-Request-Method
    希望查询是否支持的HTTP方法,一般也就是客户端会发起的方法,例如上面提到的DELETE。
  • Access-Control-Request-Headers
    CORS请求额外发送的header字段

当服务端收到这个OPTIONS请求以后,如果不支持跨域请求,则不添加任何header信息,直接返回即可,如果支持这个跨域请求,则添加相应的header

Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Allow-Credentials
Access-Control-Max-Age
  • Access-Control-Allow-Methods
    服务器支持的所有跨域请求的方法,用逗号分隔。
  • Access-Control-Allow-Headers
    跨域请求所有支持的请求头字段信息,用逗号分隔。
  • Access-Control-Allow-Credentials
    同simple request中的定义。
  • Access-Control-Max-Age
    可选,表示本次OPTIONS请求可以被浏览器缓存的时间。
相关文章
|
15天前
|
安全 Java 应用服务中间件
SpringBoot:CORS是什么?SpringBoot如何解决跨域问题?
CORS是Web开发中常见且重要的机制,SpringBoot通过提供注解、全局配置和过滤器等多种方式来解决跨域问题。选择适合的方式可以帮助开发者轻松处理跨域请求,提高应用的灵活性和安全性。
43 2
|
26天前
|
安全
CORS 跨域资源共享的实现原理是什么?
CORS 跨域资源共享的实现原理是什么?
|
1月前
|
开发框架 中间件 Java
如何处理跨域资源共享(CORS)的 OPTIONS 请求?
处理 CORS 的 OPTIONS 请求的关键是正确设置响应头,以告知浏览器是否允许跨域请求以及允许的具体条件。根据所使用的服务器端技术和框架,可以选择相应的方法来实现对 OPTIONS 请求的处理,从而确保跨域资源共享的正常进行。
|
1月前
|
JavaScript 前端开发 API
跨域资源共享(CORS)的工作原理是什么?
跨域资源共享(CORS)通过浏览器和服务器之间的这种交互机制,在保证安全性的前提下,实现了跨域资源的访问,使得不同源的网页能够合法地获取和共享服务器端的资源,为现代Web应用的开发提供了更大的灵活性和扩展性。
|
29天前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
|
3月前
|
JSON 安全 前端开发
浅析CORS跨域漏洞与JSONP劫持
浅析CORS跨域漏洞与JSONP劫持
118 3
|
2月前
|
JSON 前端开发 安全
CORS 是什么?它是如何解决跨域问题的?
【10月更文挑战第20天】CORS 是一种通过服务器端配置和浏览器端协商来解决跨域问题的机制。它为跨域资源共享提供了一种规范和有效的方法,使得前端开发人员能够更加方便地进行跨域数据交互。
|
2月前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
222 7
|
3月前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
|
4月前
|
Web App开发 JSON 数据格式
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)