介绍几种跨域请求方案
作者:郭政鸿2020/6/15
今天完成了毕业论文的初稿, 写篇技术博客提升下修为。第一次听说跨域应该是大一的事了, 当时就觉得跨域这个词很高级,很装逼,下面让我们看看这跨域到底是个什么东西?.
什么是跨域
说到跨域那就不能不提浏览器的同源策略了. 那么什么是同源策略呢, 下面是抄自MDN的解释
「同源策略」是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。
简单点来说同源策略就是浏览器为了保护我们数据隐私的一项安全举措.
在了解跨域请求之前我们需要先了解下什么是URL的各部分组成, 下面是个完整的URL链接
https://www.baidu.com/s?wd=gzh#hash
此URL可拆分后是这样的
https | 协议 |
---|---|
www.baidu.com | 域名 |
s | 请求路径 |
wd=gzh | 请求参数 |
hash | 锚点 |
443 | 端口 |
其实上面的链接在浏览器中自动隐藏了默认端口号
http协议的默认端口号是80, htts协议的默认端口号是443
所以上文中的完整URL链接应该是 https://www.baidu.com:443/s?wd=gzh#hash
好了, 既然知道了什么是URL我们就来看看什么是跨越呗.
同源 和 非同源
只有当 协议
+ 域名
+ 端口
都完全一样才属于同源, 除此之外的两个URL链接都是非同源,他们之间发生数据请求会跨域, 受浏览器同源策略限制.
举个?:
同源链接:
http://www.gzh1998.cn:80/hello?world=123
http://www.gzh1998.cn:80/ohoh
非同源链接:
http://www.gzh1998.cn:80/hello?world=123
http://www.gzh1998.cn:8080/hello?world=123
到此我们就知道了什么是跨域请求了,也知道了跨域请求会被浏览器的同源策略限制,那我们怎么解除这种限制呢.总不能跨域就不进行数据请求了吧.
说明: 本文所有实验的所用地址如下
客户端地址: http://localhost:1998
服务端地址: http://localhost:2020
方案一: JSONP
JSONP应该是最古老的跨域请求解决方案了,但是弊端和限制也很多.其实现核心是由于
浏览器同源机制对