锐客网

  1. 首页 > 睿知 > it技术 > >

#yyds干货盘点# 浏览器跨域请求 原理和个人理解

IT知识浏览器个人理解跨域请求

贵有恒，何必三更起、五更眠、最无益，只怕一日曝、十日寒。这篇文章主要讲述#yyds干货盘点# 浏览器跨域请求 原理和个人理解相关的知识，希望能为你提供帮助。
什么是跨域请求我们知道，我们web的网站的网页，会展示在浏览器中，其中的按钮、或者脚本等等可以触发事件、发起http请求的。至于发送什么样的http请求，那完全就是我们开发者（网站开发者）设计的。
我们可以按照业务需要，发出任意的http请求。任意的http请求就是千奇百怪了，可以是对自家网站后端的http请求，也可以是对其他相关网站的请求。甚至于如果我们某些开发者、黑.客不怀好意，那就发起对某些网站的恶意的请求。但是因为是在浏览器之中，实际的所有的http请求自然是浏览器发出的。
浏览器出于安全考虑，并不是所有域名都可以直接访问。 浏览器在发起任意的请求之前，浏览器会判断目标的url是不是和当前网站是来自相同的域名， 相同则一般认为是安全的，不同则被任务是跨域，此种请求就是跨域请求，它默认是不可信、不安全的。（当然，如果不是由浏览器发出的请求，那么自然不是浏览器的责任，比如ddos，就不属于跨域请求的范畴了）———— 这个就是对跨域请求的最简单的理解。

至于什么是相同域名、不同域名， 其实也很简单，这里不在赘述。



什么是普通请求其实并没有什么普通请求，这个是我自己对请求的分类。我们可以把非跨域请求理解为普通请求。
包括 同域请求、 从浏览器地址栏发起请求。 
同域请求 就是浏览器中某个页面发起的对自家网站后台的请求。下面谈谈从浏览器地址栏发起请求。


从浏览器地址栏发起请求
那么 浏览器从地址栏发起的任意url的请求， 和 浏览器从 页面发起的跨域的请求， 有什么区别吗？
区别肯定是有的，浏览器从地址栏发起的任意url的请求， 不会有referer，不存在跨域问题。
所以，从浏览器地址栏发起请求 都是普通请求！
浏览器从页面发起的任意url的请求，会有referer， （ 是不是必然有呢？ ）
然后 目标域名的服务器会检查是不是自己的域名发起的请求 ———— 这个是 web 服务器的常规操作。（是否可以禁用呢？ ）
如果来源是， 即referer是 自己域名的url，一般不会拒绝。如果不是， 那么可以选择拒绝以防止csrf 等攻.击，然后就不返回 任何内容？ 还是返回一个 cors error 的响应头呢？ 这个都是可以设置的，关键在于后端服务器。


普通请求和跨域请求 的区别普通请求是 没有的， 而 跨域请求会多一个请求头，比如Origin: http://localhost:9999， 表示自己的 域名，（ 包括 options 请求也会多 一个 Origin请求头， 如果有options 请求的话）


这个 Origin请求头， 自然是浏览器在判断不是相同的域名之后添加的。web 服务器就代表了其前端的资源—— 因为其对外提供的访问服务：包括页面、json 等任何资源 （包括前端浏览器 能展示的， 不能展示的 ）也都是来自于 web server端，即服务端。
一个 web server端 可以认为代表了一个域、一个域名。浏览器可以任意方式发起一个对 任意域名 的访问， 从浏览器地址栏， 某个浏览器页面的 按钮、页面的html 源码触发，或者js 触发。
一般而言，浏览器可以在地址栏发起任意url 的请求，但是 浏览器 一般都是不允许在 页面内发起对其他域的请求。当然， 也不是完全不行，只是默认不行。


简单请求和非简单请求浏览器将CORS请求，即跨域请求分为两类：简单请求（simple request）和非简单请求（not-simple-request）
简单请求浏览器不会预检，而非简单请求会预检。这两种方式怎么区分？


首先搞懂什么是非简单请求， 它包括：
1 请求方式是PUT或者DELETE，
2 或者Content-Type字段类型是application/json，
3 包括其他自定义的请求头 的请求。
除去非简单请求，那么其他的就是简单请求了，一个简单的非此即彼的分类。
?
实际上， 在发起跨域请求的时候，浏览器会先判断是否是非简单请求，
如果是非简单请求，
那么会先发起对目标域名的 options请求，即预检请求。 如果目标域名的服务器允许了， 那么在发起正式的请求。预检请求通过了，此时发起正式请求一般都会通过吧... 此时就被禁止的可能性就不大（个人认为）。如果预检请求不通过，比如浏览器通过预检请求响应发现，目标域名的服务器不允许当前网站发送跨域请求，或者不允许POST，那么控制台报错，不发送正式请求。

如果浏览器判断是简单请求，
那么就无需先发起options请求了，直接发起正式请求。此时发起的正式请求，仍然很可能被服务端禁止，被禁止的话，浏览器控制台通常会抛出cors xxx之类的错误。。


总结一下就是：
简单请求：一次： 正式请求
非简单请求：两次：预检请求+ 正式请求；


为什么要做这样的区分？为什么要对非简单跨域请求先发起options请求呢？ 大概是为了更加的安全、保险起见。我估计是因为：
1 put、delete 操作一般认为是新增、删除， 自然需要谨慎些。
2 Content-Type字段类型是application/json 那么可能是xhr 等发起的请求，xss、csrf 可能性更大。
3 包括其他自定义的请求头 的请求，同上，其可能是xhr等发起的请求，xss、csrf 可能性更大


跨域请求的细节浏览器处理跨域请求的时候，基本是通过请求头、响应头处理的。
请求头关键是：
Origin
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST


响应头的关键是：
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: GET,HEAD,POST
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Expose-Headers: X-Powered-By
如果设置了.allowCredentials(true) ，那么 会多一个  Access-Control-Allow-Credentials: true


【#yyds干货盘点# 浏览器跨域请求 原理和个人理解】当然，整个过程其实还是有一些复杂的，本文只是做个简单介绍。更多的细节请等待我的后续文章。

    推荐阅读


    上一篇：一文带你从零认识什么是XLA

    下一篇：#yyds干货盘点#30个类手写Spring核心原理之自定义ORM（上）