什么是跨域?以及解决方案 何为跨域
ninehua 2024-12-30 06:03 99 浏览
现在的web项目,很多都是前后端分离,特别容易出现跨域问题
那么什么是跨域问题呢?本篇文章带你彻底从本质上弄明白什么是跨域问题以及如何解决
一、跨域有什么现象
首先我们看一下现象,如何出现的跨域问题。例:
- 前段:浏览器正在访问一个页面:https://www.ceshi.com/list,在此页面中发送了一个 http 接口
- 后端:访问的后端接口为:https://xxxapi.ceshi.com/project/getList
此时页面就会访问接口失败报错:has been blocked by coRS policy: Response to preflightrequest does not pass access control check
翻译过来就是:己被CORS策略阻止:对请求的响应未通过访问控制检查
这就是没有配置相关的跨域参数,是不能访问这个接口的
二、什么是跨域问题?
举例来说,就是:浏览器访问一个页面时,比如访问 https://www.ceshi.com/list
此时的协议,主机,端口,分别是https,www.ceshi.com,80
那么这个页面中,发的接口请求,这个接口的协议,主机,端口必须和当前的页面的一样,三个都一样才行,才可以访问
否则就会出现上面的跨域现象
比如浏览器打开页面 https://www.ceshi.com/list,
在此页面中,可以请求接口 https://www.ceshi.com/edit
因为他们的协议,主机,端口,都是相同的,是可以请求成功的。
总结一句话:在浏览器中,只有协议,主机,端口三者都相同时,才可以互相访问,否则,不可以访问
注意:是在浏览器中
这里就大概了解什么是跨域
三、跨域问题是怎么造成的
这个问题就涉及到了浏览器的同源策略
这就是浏览器的同源策略,通过上面的例子可以知道
所谓的同源策略,其实就是协议,主机,端口 都是相同的,才可以互相访问,否则有一个不同,就会访问失败,造成跨域的问题;
注: 跨域问题,只是出现在浏览器中,因为浏览器有同源策略,所以才会有跨域问题
之前我也—直以为,跨域问题是由于浏览器的 同源策略 产生的,那么是不是只需要在请求前,加点配置就能解决了
为什么都是后端在响应头里面加点配置才解决的?为什么是后端?跨域问题是浏览器造成的,这和后端有什么关系?
从上面,我们知道:我们访问的url,如果不是同源的,也就是协议,主机,端口,有一个不一样,是不能请求通的
那么问题来了:
- 为什么请求不通呢?
- 既然请求不通,到底是作用在 http 的哪个阶段导致的请求不通?是浏览器拦截了请求,没有让请求发出去,导致的不通?
- 还是浏览器拦截了响应,导致的不通?
答案就是:请求是能正常的发出去的,后端也正常的响应了,浏览器是把响应给拦截了,所以会出现开头的
has been blocked by coRS policy: Response to preflightrequest does not pass access control check
用一张图说明一下,就很容易明白,如下图:
四、如何解决跨域问题
通过上面的图我们知道了,浏览器是拦截了响应(和第—阶段的请求是没有关系的),导致整个 http 请求没有走通
那么,如何解决,让接口能正常的发出去,正常的收到响应数据呢?
很容易就想到,如何在响应头中添加—些特殊的字段,浏览器一看到有这些字段,就不拦截了,那么跨域问题不就解决了吗
事实上正是这样的,这也是之前好奇,解决跨域问题,为什么是后端加—些配置,其实就是在响应头中添加了一些特殊的响应头
那么这些特殊的响应头是什么呢?
我们先看看 www.ceshi.com 是怎么解决的,添加了哪些响应头字段
是的,只要后端在响应的时候,在响应头中添加以下字段,就可以解决跨域问题
- access-control-allow-origin:该字段是必须的。它的值要么是请求时 origin 字段的值,要么是—个 * ,表示接受任意域名的请求。
- access-control-allow-credentials:该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie 不包括在CORS请求之中。设为 true ,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为 true ,如果服务器不要浏览器发送Cookie,删除该字段即可
- Access-control-Allow-Methods:该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次“预检”请求。
其实最重要的就是 access-control-allow-origin 字段,添加一个 * ,允许所有的域都能访问
本文讲了什么是跨域,如何导致的跨域问题,以及同源策略,以上的结局是是其中之一,这里主要确保 协议、域名、端口 三者始终保持一致
五、总结
通过以上的讲解,现在总结如下
- 同源策略:协议,主机,端口三者都相同,就是同一个源,只要有一个不同,就是不同的源,只有同一个源的资源才能互相访问;
- 跨域问题就是浏览器的同源策略造成的;
- 跨域问题的本质,就是浏览器拦截了响应,所以后端只需要在响应头中添加相应的字段,就可以解决跨域问题;
主要记住一下这张图:
文章后续:
如果可以让您了解 跨域 问题,可以点个关注,收藏,分享一下,我也在不断的学习,如有什么问题可以提出来,一起学习,本文是通过其它方式学习,特此分享一下,顺便给自己做个笔记,以便自己后续更快的找到解决方案;
相关推荐
- 单打独斗的产品设计师工作流程总结
-
来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。我从入行开始就在一个做自己产品的小公司工作,到现在已经三年了。刚开始工作的时候什么也不懂,老板说让出效果图,就开始直接...
- 毕业生必备软件!6套APP构建我的产品设计工作流
-
工欲善其事,必先利其器。思维和方法论固然超级重要,但是掌握并制定适合自己的工作流也可以成倍提升效率。好的软件加上熟练的使用可以帮助解决遇到的所有问题,不仅可以减轻大脑和身体的负担,更可以让产品设计师在...
- 如何在APP原型上写需求?(app原型设计规范)
-
你有没有过这样的经历——辛辛苦苦写了半天的文档,结果开发一眼没看,做需求的时候又把文档里的内容问了一遍?如果你也有这样的经历,那么在APP原型上写需求,或许能帮你解决这个问题。为什么要把需求直接写在...
- 产品经理工具箱|原型及交互设计工具
-
来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。世界上最实在最方便的原型设计及交互工具:国外的谷歌,facebook等大型互联网公司的交互工具就是上面最原始,最有效最...
- 交互设计利器汇总:实用工具大揭秘!
-
近年来,页面交互设计有了很好的发展,越来越受到人们的重视。如果你想成为一名页面交互设计师,除了对平面设计和产品设计有一定的了解外,更重要的是要知道哪个软件适合页面交互设计。本文将带您了解5款流行的页面...
- Taro - 京东凹凸实验室出品的小程序多端开发工具,内置 UI 组件库
-
可以支持转换到微信/京东/百度/支付宝/字节跳动/QQ小程序以及H5端,同时也支持使用Vue语法了。关于Taro凹凸实验室(O2Lab)来自京东零售集团,创建于2015年10月,是...
- 开发2小时,修bug2周,我用Trae做了个小程序
-
在当今快速发展的科技时代,AI技术的崛起为开发者带来了前所未有的机遇与挑战。一方面,AI极大地降低了技术门槛,让更多的创意得以快速实现;另一方面,它也提升了竞争维度,促使人们在认知、方法和时间效率上不...
- 好用的10款免费原型设计工具(免费的原型设计软件)
-
对产品经理或UI/UX设计师来说,一款好的原型设计工具至关重要。好的原型设计软件能够帮助你快速构建还原度高且信息架构清晰明了的原型图,还能极大减低工作中与同事的沟通成本,更高效地推进工作。那么,一款好...
- 用局域网内部分享Axure原型,这里有详细的步骤
-
来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。用axure做好原型,想分享给别人,有几个方法:生成本地文件,发送本地文件,但是文件有更新,就要重新发送用axure自...
- Axure制作App原型应该怎样设置尺寸?原型尺寸对照表!
-
最近有几位小伙伴儿都提出同样一个疑问:想用Axure设计一个APP原型放到真实的移动设备中演示,但不知道应该使用什么尺寸?若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科。这里老枪搜集...
- 200套数据可视化大屏模版Axure高保真原型
-
超炫可视化大屏模版来了,Axure高保真原型。关注微信公众号“素材帮帮站”,发送消息100051,获取素材下载地址。查看往期文章,获取更多免费素材。
- Axure RP 8 Beta版正式上线(axure rp8是什么软件)
-
AxureSoftwareSolution公司于美国当地时间8月12日宣布其旗下产品AxureRP的v8版本的测试版正式上线。以下是其官方博客关于对AxureRP8Beta版的介绍:今天,...
- PM小技术:使用SAE发布在线Axure文档
-
俗话说,不会写代码的产品经理不是好的射鸡湿。关于产品经理与技术之间的微妙关系,扯开了讲可是长篇大论,比如知乎上这个问题:IT行业产品经理(尤其是创业的)需要懂技术吗?懂到什么程度?,以及这个:产品经...
- 『原型资源』Axure自带图标库不够用,第三方经典图标库来袭
-
今天小编为大家带来第三方经典图标库,己确认内容可用现推荐给大家。直接上手就可不用自己画哈~获取原型文档请与班主任联系!先睹为快,合适再拿走不谢:图标太多,截取部分给大家参考o(* ̄︶ ̄*)o免费领取资...
- Axure RP 8 测试版:将于今年夏天到来
-
我们一直在努力的开发AxureRP8。我认为这是对现有客户以及刚接触Axure的人的一个重要版本。我们希望看到你使用这些新特性,所以我们对现有客户免费升级。所有有AxureRP授权的客户包括标准...