什么是跨域
协议、域名、端口 其中一个不同就称为跨域
为什么会有域
因为安全问题,浏览器的同源策略,例如: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