跨域。今天我可以确信自己真的明白了。

539 阅读3分钟

本文根据B站:尚硅谷(天禹老师)开源课程总结而来尚硅谷(天禹老师)

这些都是我个人总结,推荐新手阅读,大佬请跳过(当然非常欢迎指导)。

老话新谈,我相信跨域是作为程序员初学者的第一道坎不为过吧。我还记得当初我第一次接触跨域这个问题脑袋都是大的,网上教程很多可是一点都不会。那既然现在明白了那我们就可以聊聊跨域到底是什么。

1. 跨域是什么?

假如用户现在登录了A网站,然后在A网站存下了自己的一些信息,现在用户又去了B网站。 然后B网站可以获取到你A网站的(Cookie、LocalStorage 和 IndexDB(IndexDB这就相当于前端本地的数据库))那你想想你在这个里面是不是都存的一些个人隐私的东西,这下让别人拿到了是不是别人就可以为所欲为了,所以为了安全考虑,1995年,同源政策(也就是跨域)由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。

graph TD
用户 --> A网站
用户 --> B网站
2. 怎么样就是跨域了

举例来说,https://juejin.cn:80/editor/login.html这个网址,协议是http://,域名是juejin.cn,端口是80(默认端口可以省略)。它的同源情况如下。

  • https://juejin.cn/editor/other.html:同源
  • https://jianshu.cn/editor/login.html:不同源(域名不同)
  • https://juejin.cn:8080/editor/login.html:不同源(端口不同)
  • http://juejin.cn/editor/other.html:不同源(协议不同)
3.怎么解决跨域

我们想要解决这个跨域我首先画张图 我们是不是客户端(自己本身就是客户端)想要请求服务端拿到数据。

image.png

然后这个时候服务器端就会进行检查你的端口,协议,域名。(注意:你现在其实已经是跟服务器连接上了), 然后服务器发现你这几样中有一个对不上就会给你一耳光并把你踢走

image.png

那你说你现在都让人发现了他还能给你数据吗?那肯定是不行的对吧。那这个时候怎么办,那其实我们可这样做

当我们客户端向服务器端请求数据时,中间可以建立一个代理(也可以叫代理服务器),我们向代理服务器发送ajax请求的时候,他就会帮我们转发到服务器中,服务器这个时候也会接受到这个请求但是却不会拦截这是为什么?
因为我们单纯的客户端向服务器端发送数据走的是AJAX请求,但是我们通过代理向服务器走的并没有AJAX请求,他是属于请求转发,同源策略根本就不限制他,自然就不会拦截下来。

image.png

这个当前不只这一种方法可以解决跨域问题。但是目前我们的项目中就用到了这个所以在此做了一个终结。 如果有对proxy有疑惑的可以去看尚硅谷(天禹老师)这个视频讲的很好,非常详细的教你怎么配置proxy。

4.题外话

IndexDB这个大家熟悉吗?

IndexDB其实是一个类似于一个数据库不过就是前端专用的数据库,我们平常用不到,因为这个是存储大量数据用的。 我说存储大量数据大家有想到他的一些用处吗?其实是用来做页面缓冲的,淘宝就用到了这个东西,大家第一次进去开网,然后等一会关网可以自己试试。这个还是挺有意思的。有感兴趣的兄弟吗,有的话点赞到100我单独出一期关于IndexDB数据库的东西。

大家有什么好的意见欢迎指导。读完有帮助,不妨关注一下,点个赞支持一下。比心