前后端分离项目之浏览器的同源策略和CORS

浏览器的同源策略：

---

• 同源策略是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的功能可能都会受到影响。可以说Web是构建在同源策略基础之上的浏览器知识针对同源策略的一种实现。

• 同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

  • - 比如说，当用户在登录界面点击登录按钮时，这时前端代码应该是向程序的后端发送一个post请求，但是浏览器检测到发送的是post请求时，会将之拦截下来，先给后端代码发送一个options请求，它会代替前端，先询问后端是否允许登录，然后再向后端发送post请求。

• 同源策略是浏览器的一个安全功能，不同原的客户端脚本(js)在没有明确授权的情况下，不能读写对方资源，只有同一个源的脚本赋予dom、读写cookie、session、ajax等操作的权限。

• 图片摘自网络：如何判断是否是同源，可以查看该表

-不受同源策略影响的：

- 页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
- 跨域资源的引入是可以的。但是js不能读写加载的内容。

• 要想不受同源策略的影响，可以做跨域处理，受同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。
  附上一个跨域的参考文档https://github.com/ottoyiu/django-cors-headers/

• 当前端和后端分别是不同的端口，就设计到跨域访问数据的问题，因为浏览器的同源策略，默认是不支持两个不同域名间相互访问数据，而我们需要在两个域名间相互传递数据，这时我们就要为后端添加跨域访问的支持。我目前在研究django，所以可以使用django-cors-headers来解决面前的尴尬:后端对跨域访问的支持。

- 未使用cors时的options请求对应的响应报文

HTTP/1.0 404 Not Found

Date: Tue, 04 Jun 2019 01:14:47 GMT

Server: WSGIServer/0.2 CPython/3.5.2

Content-Length: 8332

X-Frame-Options: SAMEORIGIN

Content-Type: text/html

- 使用cors后的options请求对应的响应报文

HTTP/1.0 200 OK

Date: Tue, 04 Jun 2019 02:00:55 GMT

Server: WSGIServer/0.2 CPython/3.5.2

Access-Control-Allow-Methods: DELETE, GET, OPTIONS, PATCH, POST, PUT

Vary: Origin

Access-Control-Allow-Origin: http://127.0.0.1:8080

Access-Control-Max-Age: 86400

Access-Control-Allow-Credentials: true

Content-Type: text/html; charset=utf-8

Access-Control-Allow-Headers: accept, accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with

跨域实现的流程：

• 1、浏览器会第一次先发送options请求询问后端是否允许跨域，后端查询白名单中是否有这两个域名。

• 第一条options请求询问是否允许跨域携带数据，后端会在返回的结果中告知浏览器允许跨域

• 2、如果域名在白名单中则在相应结果中告知浏览器允许跨域。

  • 在服务器中，响应options请求时，必须在响应报文中加入如下信息：
    • - Access-Control-Allow-Methods==>支持的请求方式
    • - Access-Control-Allow-Origin==>允许跨域的源
    • - Access-Control-Max-Age==>后续请求有效时间
    • - Access-Control-Allow-Credentials==>是否允许携带cookie
    • - Access-Control-Allow-Headers==>允许的头信息

• 3、浏览器第二次发送post请求，携带用户登录数据到后端，完成登录验证操作。

  • 第二次post请求跨域携带表单数据

那么什么是cors呢

• CORS是一个w3c标准,全称是"跨域资源共享"(Cross-origin resource sharing),但一个请求url的协议,域名,端口三者之间任意与当前页面地址不同即为跨域.它允许阅览器向跨源服务器发送XMLHttpRequest请求,从而客服AJAX只能同源使用的限制.
• - 由于跨域访问资源的需要，出现了COPS机制，这种机制让web服务器能跨站访问控制，使跨站数据传输更加的安全。CORS需要阅读器和服务器同时支持，目前，主流的阅览器都支持CORS

- 现在大家使用的浏览器将cors请求分为两类：简单的请求和非简单请求

• 1、简单请求
• 简单请求只要满足两个大的条件，就属于简单的请求
  - ①、请求方式是HEAD/GET/POST这三种请求方式的一种
  - ②、HTTP的头信息不超过（Accept、Accept-Language、Content-Language、List-Event-ID、Content-Type）
• 2、非简单请求：不满足简单请求的两大条件，就是非简单请求(我也只是暂时了解，后续了解后会有所补充)