专栏首页木子墨的前端日常CORS跨域模型浅析及常见理解误区分析

CORS跨域模型浅析及常见理解误区分析

CORS跨域资源共享是前后端跨域十分常用的一种方案,主要依赖Access-Control-Allow(ACA)系列header来实现一种协商性的跨域交互。

基本模型

其中的具体流程大致可以分为以下几步: 1、前端从webview上发出ajax请求 2、浏览器监测到ajax跨域,添加origin头部,标明请求来源 2、后端接收到请求后,根据正常业务逻辑包装业务返回 3、在业务返回的response上添加ACA系列头部,如

'Access-Control-Allow-Origin' '*';
'Access-Control-Allow-Credentials' "true"; 
'Access-Control-Allow-Headers' 'X-Requested-With';

等等 4、浏览器接收到返回后判断ACA-Origin和之前加上的origin头部是否相符,相符的话进入5,否则进入第6步 5、返回完整的response内容到ajax的success中,ajax结束 6、抛出Error对象到给浏览器处理,置空response的返回给ajax处理

如果画一个来理解的话,大致如下

更详尽的内容大家可以去看一下阮一峰老师写的《跨域资源共享 CORS 详解》,里面介绍的很详尽,在这里也不在细说了。下面说说本文的另一个重点--常见理解误区

常见理解误区

看下这个问题

Q: 跨域失败的时候,后端接口返回的内容是什么样的?

当我们很多时候都在思考怎么跨域的时候,不知道大家有没有想过这个问题?跨域失败很自然的给人的想法就是拿不到数据,那肯定就是后端没有返回啊。然而很多我们理所当然的却不并是理所当然的那个样子。 事实是,

A: 跨域失败对于后端是没有感知的,跨域本来就不是服务端的事儿,它只是打个辅助,返回的数据和你跨域成功的时候一毛一样,一毛一样

是的,一毛一样。来个例子用事实说句话 我们在一个页面上发送了一个xxx/ 的跨域请求,接口端没做cors处理,这时我们在浏览器会看到

什么返回都没有,response返回体是空的,控制台报错啦,事实上呢?我们用charles抓包看到的实际情况是

看到没?服务端返回的是正常数据啊。

这个时候我们回头看看上面我们写的那个cors模型流程,服务端接口所做的工作和非跨域请求唯一的区别只是多加了那么几个ACA的头部,你觉得这几个ACA的头部直接就把数据搞没了?Naive。所以接口返回的返回体完全没变。

再来看看我为什么说跨域本来就不是服务端的事儿,它只是打个辅助。回顾一下跨域的概念,你会发现跨域本身只是浏览器上由于同源策略才存在的一种安全保障行为,服务端一个接口可能供给浏览器中的接口调用,也可以同时给其他服务使用。一个接口数据返回来了,浏览器判断是不是跨域你自己去处理,和后端就没有关系了。

这个问题说实话最开始的时候,我的反应也是错的,后面仔细想了想才得到这个答案,或许这只是和我一样小白的误区,希望对大家有所帮助吧。

~全篇完~

前面还写了一个nginx跨域相关的《nginx反向代理跨域基本配置与常见误区》,大家有兴趣欢迎来踩,如有问题欢迎指出~

~真·全篇完~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅析JS中的堆内存与栈内存

    不知道各位看官怎么想?答案是部分能改,部分不能改。const定义的基本类型不能改变,但是定义的对象是可以通过修改对象属性等方法来改变的。如,

    木子墨
  • 到底该用img还是background-image?

    在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片。这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式...

    木子墨
  • 懒就是生产力之图片懒加载

    最近负责的项目渐渐的由业务型转向营销型,营销内容越来越多,图片也就多了起来。图片一多起来问题就来了,一上来几十张图片加载起来半天都过去了,咋办?凉拌--懒加载

    木子墨
  • Cross-Origin Resource Sharing (CORS)-跨域

    说起"跨域",大家肯定感觉既熟悉又陌生,因为自己可能有些印象,但是具体说说又说不太清楚,我前段时间也是遇到了这个问题,就此来总结下。

    别明天就今天吧
  • 到底什么是跨域?附解决方案!

    同源策略是由 Netscape 公司提出的一个著名的安全策略,所有支持 JavaScript 的浏览器都会使用这个策略。

    Java技术栈
  • AJAX跨域完全讲解

    AJAX跨域完全讲解 今天在慕课网上学习了AJAX跨域完全讲解:https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实...

    Java3y
  • SpringBoot应用跨域访问解决方案

    说到跨域访问,必须先解释一个名词:同源策略。所谓同源策略就是在浏览器端出于安全考量,向服务端发起请求必须满足:协议相同、Host(ip)相同、端口相同的条件,否...

    字母哥博客
  • 用fiddler进行debug

    昨晚在家里调试一个页面,弄了好一会,fiddler都没有抓到数据。最后Google之,才发现因为我等都装了SwitchySharp这类自动翻墙插件。导致Chro...

    libo1106

扫码关注云+社区

领取腾讯云代金券