cors 跨资源共享 复习

什么是跨域

协议、域名、端口 其中一个不同就称为跨域

为什么会有域

因为安全问题，浏览器的同源策略，例如：node下就没有同源策略

如何解决跨域

使用jsonp、CORS(跨域资源共享)属于http里面的内容

什么是jsonp

jsonp 利用src没有跨域的问题，利用后端返回一个回调函数，需要后端处理

什么是CORS

跨域资源共享，http中的内容，浏览器会根据http的请求头和响应头，允许你是否可以跨域，需要后端处理

简单请求，服务器是否允许我们的域名访问，设置了header请求头的预请求，服务器是否允许我们的请求

为什么postman不需要跨域

跨域是浏览器基于同源策略特有的

浏览器的同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。
同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。

CORS主要有哪些设置

HTTP 响应首部字段

允许访问该资源的外域 URI

Access-Control-Allow-Origin: <origin> | *

头让服务器把允许浏览器访问的头放入白名单

例如：Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

在跨源访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。

指定预请求的结果缓存多长时间(秒)

Access-Control-Max-Age：<delta-seconds>

Access-Control-Allow-Credentials: true 默认flase

Access-Control-Allow-Credentials 头指定了当浏览器的credentials设置为true时是否允许浏览器读取response的内容

Access-Control-Allow-Methods: [, ]*

Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。

Access-Control-Allow-Headers: [, ]*

Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。

简单的跨站请求：

请求方式为 HTTP/1.1 GET 或者 POST

如果是POST，则请求的Content-Type为以下之一：

application/x-www-form-urlencoded, multipart/form-data, 或text/plain

在请求中，不会发送自定义的头部（如X-Modified）

预请求：

使用GET或POST以外的方法

利用POST发送application/x-www-form-urlencoded, multipart/form-data, or text/plain之外的Content-Type

例如，post body的Content-type为application/xml

发送自定义的头信息，如x-pingaruner

服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。
Access-Control-Max-Age: 1000 单位秒
有效时间内，浏览器无须为同一请求再次发起预检请求
浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效

CORS 中的预检请求

在 CORS 中，可以使用 OPTIONS 方法发起一个预检请求，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法；Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。

凭证请求

带凭据的请求，将Cookies和HTTP认证信息一起发送出去的跨域请求，根据请求方式，可以是 简单请求 或 请求
附带身份凭证的请求
request： withCredentials 标志设置为 true
XMLHttpRequest.withCredentials 属性是一个Boolean类型
未设置withCredentials 为true，那么就不能为它自己的域设置cookie值
如果服务器端的响应中未携带 Access-Control-Allow-Credentials: true ，浏览器将不会把响应内容返回给请求的发送者。
附带身份凭证的请求与通配符
对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。

参考网址

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
XMLHttpRequest