CORS 理解(不要那么多术语)

本文涉及的产品
.cn 域名,1个 12个月
简介: 摘要谈到跨域,不论前端还是后端,多少有点谈虎色变,面试中也常会问到这些问题,浏览器和服务器端到底怎么做才能跨域,他们都做了什么?同源 vs 跨域同源,字面意义是相同的源头,即同一个web服务器(比如tomcat启动的一个实例),好比一个家庭;跨域就是从一个web服务器向另一个服务器发送或获取数据,好比去邻居家拿东西。

摘要

谈到跨域,不论前端还是后端,多少有点谈虎色变,面试中也常会问到这些问题,浏览器和服务器端到底怎么做才能跨域,他们都做了什么?

同源 vs 跨域

同源,字面意义是相同的源头,即同一个web服务器(比如tomcat启动的一个实例),好比一个家庭;跨域就是从一个web服务器向另一个服务器发送或获取数据,好比去邻居家拿东西。之所以要做跨域限制,是为了安全,你不能从邻居家直接拿吧,总得问过人家。

那么怎么来判断同源?就看一个web服务器的根本三要素:协议、web服务器域名、端口号。

比如:当前页面的地址是http://myhost.com:8080/index,源就是http://myhost.com:8080,当新请求的协议、域名、端口号与之完全一致即是同源,否则是跨域。

对于下面发送的请求,浏览器的判决如下:

  • http://www.myhost.com:8080/users 跨域 -> 域名必须完全一致
  • https://myhost.com:8080/users 跨域 -> 协议必须一致
  • https://myhost.com:9000/users 跨域 -> 端口必须一致
  • https://myhost.com/users 跨域 -> 端口必须一致(没有端口也是不一致)
  • https://myhost.com:8080/profile/users 同源

跨域时的动作

浏览器端

假设我们点击一个按钮去获取数据,获取数据的请求准备从浏览器发出,这时浏览器先会检测这条请求是同源还是跨域,也就是与按钮所在页面的地址是同源还是跨域,如果是同源,好说,直接发送出去;如果是跨域的请求,那就得hold住先,浏览器会在请求的http header中加上一个Origin字段,标明这个请求是从哪里发出来的,例如: Origin:http://neighbour.com:9000,这样服务器端好辨识是自己家人来取东西,还是隔壁老王来借东西了。

那些做检测、加header字段等事情全是浏览器做,对于前端开发者来说,什么事都不用干,ajax请求平时怎么发送,跨域时还怎么发送。可见,跨域对于前端没影响,关键在于服务器端。

服务器端

每个web服务器就像一个家庭。好邻居要吃螃蟹来借点醋,这没问题;坏邻居家有醋要来借点螃蟹,这不干。

服务器收到请求会给与响应,响应的header里写明跨域的配置信息,告诉浏览器,它允许哪些域名发来的请求访问,哪些method可以执行。浏览器收到响应后自动判断能不能真正执行请求。

假设服务器域名是http://rich.com:8080,它收到了一个从http://neighbour.com:9000发来的请求http://rich.com:9000/borrow-vinegar,服务器响应它,在响应中写明本服务器支持哪些域名可以访问,哪些method可以执行,浏览器收到后做匹配,再判定。

那么,服务器有哪些判定的规则呢?

是否允许跨域的判定

一个支持CORS的web服务器,有如下的判定字段,他们会在响应的header中写明

  • Access-Control-Allow-Origin:允许跨域的Origin列表
  • Access-Control-Allow-Methods:允许跨域的方法列表
  • Access-Control-Allow-Headers:允许跨域的Header列表
  • Access-Control-Expose-Headers:允许暴露给JavaScript代码的Header列表
  • Access-Control-Max-Age:最大的浏览器缓存时间,单位为s

其中Access-Control-Allow-Origin(访问控制之允许的源),在响应的http header中必须有的,表示允许访问本服务器的源头Origin(域名),可以是特定的域名列表,用逗号分隔,也可以是通配符 *,表示支持任意域名的访问。

除了限定源头Origin,还会限制请求的方法MethodHeader

如,如果服务器设定Access-Control-Allow-Methods:GET,那么跨域的POST请求无法在这个服务器执行。

总流程

  • 页面发送请求
  • 浏览器根据同源策略做出判定,如果是同源请求,直接发送出去;如果是跨域请求,在HTTP HEADER加上Origin字段,或是先发送一次预检请求(preflight)。
  • 服务器接收请求,根据自身跨域的配置(如允许哪些域名,什么样的Method访问),返回文件头。若未配置过任何允许跨域,则文件头里不包含Access-Control-Allow-origin字段,若配置过域名,则返回Access-Control-Allow-origin+ 对应配置规则里的域名的方式。
  • 浏览器接收到响应,根据响应头里的`Access-Control-Allow-origin字段做匹配,如果没有这个字段,说明不匹配;如果有,将字段内容和当前域名做比对。如匹配,则可以发送请求。

跨域的请求形式

跨域的请求分两种,一种是简单请求,一种是非简单请求(废话)。

  • 简单请求,方法仅限于 HEAD,GET或POST,且Header的字段不超过以下字段:

    • HeadeAccept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain (没有application/json, 说明如果发送JSON格式的body请求数据是一个非简单请求)
  • 非简单请求就是其他请求

简单请求浏览器会直接在请求的Header加上Origin字段再发送;非简单请求浏览器则会先发送一次预检请求,根据预检请求的结果,决定是否正式发送请求。

详情可以访问阮一峰的日志:跨域资源共享 CORS 详解

来源:https://segmentfault.com/a/1190000017481505

相关文章
前端开发中的跨域资源共享(CORS)机制
【2月更文挑战第3天】 在前端开发中,跨域资源共享(CORS)机制是一个重要的安全性问题。本文将介绍CORS的概念、原理和实现方式,并探讨在前端开发中如何处理跨域资源请求,以及如何提高网站的安全性。
CORS 跨域资源共享的实现原理是什么?
CORS 跨域资源共享的实现原理是什么?
跨域资源共享(CORS)的工作原理是什么?
跨域资源共享(CORS)通过浏览器和服务器之间的这种交互机制,在保证安全性的前提下,实现了跨域资源的访问,使得不同源的网页能够合法地获取和共享服务器端的资源,为现代Web应用的开发提供了更大的灵活性和扩展性。
|
2月前
|
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
193 1
js开发:请解释什么是跨域请求(CORS),以及如何解决跨域问题。
CORS是一种W3C标准,用于解决浏览器同源策略导致的跨域数据访问限制。它通过服务器在HTTP响应头添加标志允许特定源进行跨域请求。简单请求无需预检,而预检请求(OPTIONS)用于询问服务器是否接受非简单请求。服务器端配置响应头如`Access-Control-Allow-Origin`等实现CORS策略,客户端JavaScript则正常发起请求。若配置不当,浏览器将阻止跨域访问,保障安全。
120 2
JavaScript中跨域资源共享(CORS):原理和解决方案
【4月更文挑战第22天】本文介绍了JavaScript中跨域资源共享(CORS)的原理和解决方案。CORS借助HTTP头部字段允许跨域请求,核心是Access-Control-Allow-Origin响应头。解决方案包括:服务器端设置响应头(如使用Express.js的cors中间件)、使用代理服务器或JSONP。现代Web开发推荐使用CORS,因为它更安全、灵活,而JSONP已逐渐被淘汰。理解并正确实施CORS能提升Web应用性能和安全性。
同源策略:概念、作用、跨域问题及解决办法
同源策略(Same Origin Policy,SOP)是一种重要的网络安全机制**,是由Netscape公司在1995年引入浏览器的一种安全功能,它要求网页在执行某些操作时,如使用XMLHttpRequest或Fetch API进行网络请求,或者尝试访问cookies、LocalStorage、IndexedDB等资源时,必须遵循“同源”原则。
深入OAuth 2.0:常见过滤器及其重要性
深入OAuth 2.0:常见过滤器及其重要性
129 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等