衣带渐宽终不悔,为伊消得人憔悴。愿,这份爱在你我之间没有 “跨域”

简介: 相信无论是前端还是后端在开发的时候,都会遇到这样的一个问题就是:跨域跨域可以说是成长路上必经的一个“坑”。但是我们不应该对它嗤之以鼻,因为它在时时保护着我们服务器的安全。

“当对一个目标有着强烈的持续的渴望时,苦苦思索体悟,就可能在事先“清晰地看见”那个崭新的结果。相反,如果事先没有清晰的意象,就不会有崭新的成果出现” ——出自《稻盛和夫给年轻人的忠告》

前言

   相信无论是前端还是后端在开发的时候,都会遇到这样的一个问题就是:跨域跨域可以说是成长路上必经的一个“坑”。但是我们不应该对它嗤之以鼻,因为它在时时保护着我们服务器的安全。



概念

到底什么是跨域?

当我们发起一个请求时,请求中URL的协议、域名、端口三者之间任意一个与当前页面URL不同时就出现跨域现象。

解释一下:

一个请求链接如下:

http://www.xxxx.com。那么它的

  • 协议是http://
  • 域名是www.xxxx.com
  • 端口是80(默认端口可以省略)

它的同源的情况如下:


为什么要有跨域?

我们在开发web应用的时候,一般都是基于浏览器。当代浏览器都遵循同源政策。

同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

在这一政策下,受影响的有:

  • Cookie、LocalStorage、IndexDB不能获取
  • DOM 无法获得
  • Ajax 无法正常请求

所以我们平时遇到的AJAX 无法发送只是其中一个情况而已

那么问题来了,小伙伴肯定有疑问,为什么我平时用Postman 或者 其它第三方的测试接口的工具没有发生跨域的情况呢,这是因为它们没有遵循同源政策,所以不会有跨域的情况。

没有必要对跨域嗤之以鼻,如果没有它的存在,各个网站之间的Cookie或者其它敏感的信息相互传递,肯定是非常不安全的。所以我们应该正确对待他。


如何解决跨域?

下面我们重点介绍如何在 AJAX 下解决跨域情况,这是我们平时遇到最多的问题。

其实有三种办法可以解决 AJAX下的跨域情况:

  • JSONP
  • WebSocket
  • CORS

这里呢我们只介绍 CORS 这种情况, 这也是我唯一推荐给大家的一种方式。

在CORS这种情况下,前端几乎不用配置任何东西,当然这要麻烦后端的大佬了,相信大家对下面的配置肯定不陌生。无论是直接复制别人的还是从网上百度的,应该都见过:

Access-Control-Allow-Methods: ……
Access-Control-Allow-Headers: ……
Access-Control-Allow-Credentials: ……
Access-Control-Max-Age: ……

没错,就是这几个请求头。

服务器需要在浏览器预检时候,告诉浏览器,同意你的请求,这时浏览器才会发起真正的请求。

这也是很多小伙伴说,为什么我的后端代码没有执行,没有打印任何信息呢,就是因为这几个头字段没有配置正确,从而浏览器不会继续发起真正的请求。


总结

今天先给大家介绍这么多。详细的信息,大家可以参考【阮一峰】大佬的文章,介绍的非常详细。相信大家在读完之后,一定会有所收获,从此对跨域不再害怕甚至是痛恨了。

相关文章
|
4月前
|
安全 网络安全 网络虚拟化
网络工程师必知的神秘术语大全究竟藏着哪些关键信息?快来一探究竟!
【8月更文挑战第22天】这份最新整理的网络技术中英文术语大全对于网络工程师来说是一份宝贵的资源。它可以帮助网络工程师更好地理解和掌握网络技术,提高工作效率,解决各种网络问题。无论是在网络规划、设计、实施还是维护阶段,这些术语都将发挥重要的作用。让我们一起收藏这份术语大全,为网络技术的学习和实践打下坚实的基础。
64 1
|
移动开发 前端开发 JavaScript
花无涯带你走进黑客世界16 前端攻城狮资源
Web前端开发是从网页制作演变而来的,在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。
|
前端开发 JavaScript 机器人
程序员牛人专访0012期|陪伴是对开发最长情的信任
  外包是把不具有核心竞争力的业务转移出去,而通过众包则可以加强企业的核心竞争力。   在刚过去的一月份,我们结束了平台上一个三十万的教育类的手机与pc端的开发的项目:新学习(大家可以下载app体验)。项目从8月底开发,到12月底开发完成,历经4个月的时间,在2021年一月初,提交客户验收与测试,目前已经上架正式运行。   众包有很大的区别是大家是在线上,来自天南地北。这相比于传统外包有相当大的难度,例如团队协作、项目管理、需求梳理等等。 在项目费用偏高、并且整个开发过程很顺利的情况下,翠花就对带领线上团队的项目经理产生了一肚子的疑问?是他运气好碰到了好的客户?还是他遇到了技术贼好的开发
184 0
|
云栖大会
当代职场人的头秃瞬间大合集,看看有cue到你的瞬间么?
当代职场人的头秃瞬间大合集,看看有cue到你的瞬间么?
当代职场人的头秃瞬间大合集,看看有cue到你的瞬间么?
|
iOS开发
10月31日科技联播:马云发微博悼念金庸,若无先生,不知是否还会有阿里
马云发文悼念金庸:只因一个“侠”字,结缘半生;苹果召开新品发布会,iPad 八年来最大升级,新款ipad pro终于取消home键;iOS12.1正式版上线,修复旧bug,再添新功能;三星利润创纪录,手机业务却走向低迷,一起来看今天的科技快讯!
1483 0
|
安全
《战争论》第五篇《军队》的主要内容
《战争论》第五篇《军队》的主要内容 《军队》是《战争论》的第五篇,主要论述了四个部分,包括兵力和编成、战斗外活动、给养和地形(如图1所示)。 图1 《军队》的主要原则   《战争论》写道:“我们将从下列四个方面来研究军队: (1)军队的兵力和编成; (2)军队在战斗外的状态; (3)军队的给养; (4)军队同地形的一般关系。
1520 0