CORS跨域资源共享

这篇文章来带你了解一下什么是跨域资源共享,它由一系列传输的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请求。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值