这篇文章来带你了解一下什么是跨域资源共享,它由一系列传输的HTTP头组成,这些头决定浏览器是否阻止获取请求的响应,它也可以帮我们解决跨域请求的问题,那我们就先来了解一下什么是跨域吧
一个域名地址由协议,域名(IP地址),端口号组成
协议://域名:端口号
协议通常为HTTP,HTTPS
端口号:通常为80
域名:www.a.com 等类似于这种,也以是ip地址
这三者中只要有任意一个不同时都算作不同域
在这里我们需要知道跨域并不是请求没有发送出去,也并不是服务端没有响应,而是返回的结果是被浏览器给拦截了,要不说跨域是浏览器整出来的呢。Ajax可以获取响应,但浏览器觉得这并不是同一个域,觉得不安全,就拦截下来了。
我们通过在服务端设置同源策略地址,即在响应头上添加Access-Control-Allow-Origin:'请求地址’和一些其他的字段,例如请求方式等,
res.writeHeader(200,{'Access-Control-Allow-Origin':'地址',
'Access-Control-Allow-Methods':'GET,POST'})
或者
res.writeHeader(200,{'Access-Control-Allow-Origin':'*'})
此处*代表任意跨源请求
另外CORS默认不发送Cookie和HTTP认证信息,如果要把Cookie发送到服务器,我们需要另行添加
服务器段添加:
res.writeHeader(200,{'Access-Control-Allow-Credentials':true})
同时Access-Control-Allow-Origin字段的值不能为*
在Ajax请求中添加
var xhr =new XMLHttpRequest();
xhr.withCredentials = true;
常用的请求头信息有:
Access-Control-Allow-Origin 设置请求的资源能够共享给哪些域
Access-Control-Allow-Credentials 为true时使服务器同意发送cookie
Access-Control-Expose-Headers 那些HTTP头的名称能在响应中列出
Access-Control-Allow-Methods 指定那些HTTP方法允许访问请求的资源
CORS解决跨域的优势在于它支持所有类型的HTTP请求,除了我们常用的post,get请求方式以及head请求方式是简单请求,其他的几种都属于非简单请求。其区别在于非简单请求在通信之前,会进行一次HTTP查询请求(请求方式OPTIONS),会检查域名是否在服务器可许名单之中以及头字段信息是否能够使用,判断是否允许这次的跨源请求,得到回复后才能够发送XMLHttpRequest请求。