1.什么是跨域?

  • 当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域. 跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,但是因为浏览器存在一个"同源策略",结果就被浏览器拦截了。

  • 同源策略限制以下几种行为:

    1. Cookie、LocalStorage 和 IndexDB 无法读取
    2. DOM和JS对象无法获得
    3. AJAX 请求不能发送
    • 举个例子:当一个页面中存在js或者jq的ajax请求,当该请求与当前域中的协议、子域名、主域名、端口号中任意一个不相同时,都是跨域,

    • 最后再简单来说:浏览器具有“同源策略”,即:因为浏览器存在一个"同源策略",浏览器只能想当前所在的域发送Ajax,如果向其他域发送请求,则浏览器就会报错。

2.处理跨域的两种方法

解决办法有两个:

  1. cors方法:

    • 这个方法是一个主流方法,通过设置响应对象的响应头,去强制允许浏览器接受跨域的响应对象

      def api (request) :
      ret : = HttpResponse('百度')
      ret["Access-Control- Allow -Origin"] = "*” #设置响应对象的响应头,接受任何跨域响应对象
      return ret
  2. jsonp:这是一种思想,不是处理跨域问题的最好方法,绝对的爆炸思想

    • 一个解决跨域的方案,是一种巧妙的机制,可以绕过浏览器的同源策略,实现跨域(动态创建script标签)。
    • 精华在第三部分!

3.终极思想(精华部分)

再次声明: jsonp这是一种思想,不是解决跨域的最好办法,只是一个解决跨域的方案,是一种巧妙的机制,可以绕过浏览器的同源策略,实现跨域(动态创建script标签)。但是这个思想是真的牛逼,一起来看

  • 首先想一下跨域的根本原因:因为浏览器存在一个"同源策略",浏览器只能想当前所在的域发送Ajax,如果向其他域发送请求,则浏览器就会报错。

    • 浏览器存在同源策略
    • 阻止请求的响应对象

3.1 js跨域示例:

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 同源请求
function sendMsg1() {
$.ajax({
url:'/msg/',//默认端口8000
type:'GET',
success:function (arg) {
console.log(arg);
}
})
}
// 跨域请求
function sendMsg2() {
$.ajax({
url:'http://127.0.0.1:9000/api/',
type:'GET',
success:function (arg) {
console.log(arg);
}
})
}
</script>

跨域请求触发时报错:

重点来了,到了这不知道你有没有留意一点,ajax的请求的响应对象虽然被拦截了,但是所引用的jquery源<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 依然生效! 天呐,ajax是跨域,jquery就不是?也是!因为当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域!但是为什么没有拦截我的jquery呢?

  • 因为src拥有"同源策略"的通行证!,也就是同源策略不会拦截src属性的请求响应对象

既然是这样,那如果我在<script>标签的src中写入一个我的请求url呢? 搞事情!

3.2 jsonp绕过同源策略示例

  • 因为src拥有"同源策略"的通行证!,也就是同源策略不会拦截src属性的请求响应对象
// 前端页面

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 同源请求
function sendMsg1() {
$.ajax({
url:'/msg/',
type:'GET',
success:function (arg) {
console.log(arg);
}
})
}
// 依旧跨域
function sendMsg2() {
var tag = document.createElement('script'); //创建一个script标签
tag.src = 'http://127.0.0.1:9000/api/?callback=f1'; //更改src属性
document.head.appendChild(tag); // 添加到head中
document.head.removeChild(tag); //删除该标签
} function f1(arg) { // 请求响应完毕后,要执行的函数
console.log(arg);
} </script>
# 目标域的api接口
def api(request):
func_name = request.GET.get('callback')
return HttpResponse('%s("百度")' %func_name) # 灵活接受前端的参数,并将该参数和数据一起返回

呼~创建一个script标签, 更改src属性,添加到head中,删除该标签,一气呵成,完美跨域!

  • 创建一个script标签,更改src:
在跨域请求出发时,创建一个script标签,并将src的值赋值为要请求的url,并动态设置参数callback=f1,f1是为了返回对象后执行定义的f1函数,出发自定义的动作
  • 将自定义的script标签添加到head中

        将自定义的script标签添加到head中后,script标签就会根据url请求一个js文件,并按照javascript的方式执行,也就是去url请求一个响应对象,也就是 f1("百度"),你是不是想到了什么?没错,如果在此时你定义了
    function f1(arg) {
    console.log(arg);
    }
    这么一个函数,这个函数就会被执行,那么跨域的问题不就解决了,也就是可以任你摆布了
  • 删除该标签

    在head添加了script标签,得到f1("百度")后f1函数会立即执行,防止多次请求head中script标签过多,删了就行!

大功告成!

  • 不过呢jsonp只能发get请求,

小结

浏览器的"同源策略"不会拦截src的请求响应,通过该机制就可以绕过浏览器的同源策略.
再重复一次:jsonp一个解决跨域的方案,是一种巧妙的机制,可以绕过浏览器的同源策略,实现跨域(动态创建script标签).这是一种思想.

由"跨域"引出的一个终极思想(jsonp)的更多相关文章

  1. AJAX跨域调用相关知识-CORS和JSONP(引)

    AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...

  2. 前端跨域问题,以及ajax,jsonp,json的区别

    看了很多网上的资料,小七感觉都没有完全解决我的疑惑以及问题,所以特意拿出通俗易懂的话讲解跨域问题,以及ajax,jsonp,json的区别.首先先说跨域问题什么时候需要跨域?[1]域名不同(即网址不同 ...

  3. 跨域问题及其解决方法(JSONP&CORS)

    一.什么是跨域 当a.qq.com域名下的页⾯或脚本试图去请求b.qq.com域名下的资源时,就是典型的跨域行为.跨域的定义从受限范围可以分为两种,⼴义跨域和狭义跨域. (一)广义跨域 ⼴义跨域通常包 ...

  4. javascript 跨域请求详细分析(终极跨域解决办法)

    自从我接触前端以来,接手的项目里面很大部分都是前后端分离的,后端只提供接口,前端根据后端接口渲染出实际页面.个人觉得这是一个挺好的模式,前后端各自负责各自的模块,分工明确,而且也给前端更大的发挥空间. ...

  5. 浅论ajax跨域!从一个例子开始!

    //所谓跨域,简单来说就是去访问不是自己域名下的数据 <!DOCTYPE html> <html lang="en"> <head> <m ...

  6. WeX5 - AJAX跨域调用相关知识-CORS和JSONP

    http://docs.wex5.com/ajax-cross-domain/ 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容 ...

  7. AJAX跨域调用相关知识-CORS和JSONP

    1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去 ...

  8. AJAX跨域问题解决方法(2)——JSONP解决跨域

    JSONP是什么?JSON全称为JSON with Padding,是JSON的一种补充的使用方式,不是官方协议. 使用JSONP服务器后台要改动吗?JSONP不同于一般的ajax请求返回json对象 ...

  9. 跨域两种解决方案CORS以及JSONP

    一.CORS设置请求头 设置请求头实现跨域: //跨域的浏览器会让请求带Origin头,表明来自哪里的跨域请求 Origin: http://xxx.example //表明允许跨域访问 Access ...

随机推荐

  1. Jmeter发送post请求报错Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

    常识普及: Content-type,在Request Headers里面,告诉服务器,我们发送的请求信息格式,在JMeter中,信息头存储在信息头管理器中,所以在做接口测试的时候,我们维护Conte ...

  2. React生命周期函数理解

    一.组件挂载阶段 1. componentWillMount() 该方法在首次渲染之前调用,在一个组件挂载到卸载的过程中,仅仅执行这一次.该函数内可以state初始化的工作,与constructor的 ...

  3. [工具使用]-利用latex管理创建自己的ACM模板

    从很早入坑ACM开始,便和各种算法的模板打着交道,虽然kaungbin的模板已经足够强大,但是自己在平常做题中也逐渐有着自己的一些模板,也有一些kuangbin模板中没有的更快的板子,虽然不确定时候以 ...

  4. LeetCode 笔记

    Valid Sudoku 数独整体能够满足的情况是比较复杂.参考:编程之美 关于数独问题的讨论 这道题的解法可能简单一点,因为对输入进行来限制.只是去判断是否是一个数独数独的形式相比较来说也是较简单的 ...

  5. 不修改的主席(HJT)树-HDU2665,POJ-2104;

    参考:优秀的B站视频:   和 https://blog.csdn.net/creatorx/article/details/75446472 感觉主席树这个思路是真的优秀,每次在前一次的线段树的基础 ...

  6. 牛客暑假多校第二场 K carpet

    题意:给你一个n*m的矩阵 ,每个位置都有一个字符并且都有一个值,现在需要找到一个p*q的子矩阵, 原来的矩阵可以由现在这个矩阵无限复制然后截取其中的一部分得到,并且要求 子矩阵里最大的值 * (p+ ...

  7. lightoj 1086 - Jogging Trails(状压dp)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1086 题解:题目就是求欧拉回路然后怎么判断有欧拉回路只要所有点的度数为偶数.那 ...

  8. == != === equals() 区别

    java中的数据类型,可分为两类: 1.基本数据类型,也称原始数据类型. byte,short,char,int,long,float,double,boolean,他们之间的比较,应用双等号(==) ...

  9. js 数组方法的作用,各方法是否改变原有的数组

    不会改变原来数组的有: concat()---连接两个或更多的数组,并返回结果. every()---检测数组元素的每个元素是否都符合条件. some()---检测数组元素中是否有元素符合指定条件. ...

  10. 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析

    以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...