cors 跨资源共享 复习

什么是跨域

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

为什么会有域

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

如何解决跨域

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

什么是jsonp

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

什么是CORS

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

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

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

上一篇:解决Tomcat(GeoServer)等各种跨域问题


下一篇:CORS( 跨域资源共享)——实例介绍