同源策略 & 跨域
同源
同源:指的是两个 URL 地址具有相同的协议、主机名、端口号
同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能。
浏览器的同源策略规定:ajax请求的接口地址 与 ajax所在的静态html文件地址 要遵循同源策略
跨域
概念
同源指的是两个 URL 的协议、主机名、端口号完全一致,反之,则是跨域
出现跨域的根本原因:浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
-
受到同源策略的限制,上面的网页请求下面的接口会失败!
浏览器允许发起跨域请求。但跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!
突破浏览器跨域限制的三种方案
JSONP , CORS 与 反向代理 是实现跨域数据请求的三种技术方案。
注意:目前 JSONP 在实际开发中很少会用到,
CORS 与反向代理是现在跨域的主流技术解决方案。
CORS 的概念
CORS 是解决跨域数据请求的一种解决方案,全称是 Cross-origin resource sharing。
CORS 技术需要浏览器和服务器同时支持,二者缺一不可:
① 浏览器要支持 CORS 功能(主流的浏览器全部支持,IE 不能低于 IE10)
② 服务器要开启 CORS 功能(需要后端开发者为接口开启 CORS 功能)
CORS 的原理
服务器端通过 Access-Control-Allow-Origin 响应头,来告诉浏览器当前的 API 接口是否允许跨域请求。
CORS 的两个主要优势
① CORS 是真正的 Ajax 请求,支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式
② 只需要后端开启 CORS 功能即可,前端的代码无须做任何改动
反向代理
原理: ajax跨域去第三方接口请求数据是拿不到的,因要遵循同源策略. 但是去自己的服务器要数据是不是就遵循同源策
略了.再让自己的服务器去第三方的接口服务器取数据.最后再返回给ajax
JSONP
JSONP 是实现跨域数据请求的一种技术解决方案。它只支持 GET 请求,不支持 POST、DELETE 等其它请求
JSONP 的底层实现原理:
JSONP 在底层,用到了 <script>
标签的 src 属性!
<script>
标签的 src 属性,不受浏览器同源策略的限制,可以把非同源的 JavaScript 代码请求到本地,并执行
1.把非同源的 JavaScript 代码请求到本地,并执行:
<script src="http://www.xxx.com/xxx.js"></script>
<script src="http://www.liulongbin.top:3009/api/getscript2"></script>
script的src属性值可以获取网络上任意的资源
2.如果请求回来的 JavaScript 代码只包含函数的调用,则需要程序员手动定义 show 方法。
function showInfo(data) { console.log(data) }
3.在指定<script>
标签的 src 属性时,可以通过查询参数中的 callback,自定义回调函数的名称:
<script src="http://www.liulongbin.top:3009/api/jsonp?callback=showInfo"></script>
缺点:服务器响应回来的代码中,调用的函数名是写死的
4.在指定 <script>
标签的 src 属性时,还可以通过查询参数的方式,指定要发送给服务器的数据:
<script src="http://www.liulongbin.top:3009/api/jsonp?callback=showInfo&name=zs&age=20"></script>
JSONP 不是真正的 Ajax 技术
在解决跨域问题时:
-
CORS 方案用到了 XMLHttpRequest 对象,发起的是纯正的 Ajax 请求
-
JSONP 方案没有用到 XMLHttpRequest 对象,因此,JSONP 不是真正的 Ajax 技术
只要用到了 XMLHttpRequest 对象,发起的就是 Ajax 请求!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性