0、产生跨域的原因

浏览器的同源策略

什么是浏览器的同源策略?

　　src开发

　　ajax禁止

解决方法

jsonp

　　通过src绕过浏览器的同源策略

　　缺点：只发送GET请求

cors

　　通过设置相应头

　　分类

　　　　简单请求　　

　　　　复杂请求　　options 预检

一、cors（常用简单）

1、http://127.0.0.1:8000

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h2>django</h2>

<input type="button" name="" id="getService" value="获取python的数据">

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<script>

    $("#getService").on('click', function () {

        // alert(123)

        $.ajax({

            // 目标域，获取数据

            url: "http://127.0.0.1:8002/service/",

            type: "get",

            success: function (data) {

                console.log(data)

                // console.log(typeof data)

            }

        });

    })

</script>

</body>

</html>

2、http://127.0.0.1:8002

def service(request):

    dic = {"name": "python"}

    response = HttpResponse(json.dumps(dic))

    # 获取资源的ip

    response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"

    return response

CORS中间件

https://www.cnblogs.com/wt7018/p/11531343.html

二、jsonp

1、http://127.0.0.1:8000

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h2>django</h2>

<input type="button" name="" id="getService" value="获取python的数据">

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<script>

    $("#getService").on('click', function () {

        // alert(123)

        $.ajax({

            // 目标域，获取数据

            url: "http://127.0.0.1:8002/service/",

            type: "get",

            dataType: "jsonp",

            jsonp: "callbacks",

            // jsonpCallback: "abc",

            success: function (data) {

                console.log(data)

                // console.log(typeof data)

            }

        });

    })

</script>

</body>

</html>

2、http://127.0.0.1:8002

def service(request):

    dic = {"name": "python"}

    dic_str = json.dumps(dic)

    func = request.GET.get("callbacks")

    print(func)

    return HttpResponse("{}('{}')".format(func, dic_str))

跨源请求cors和jsonp的更多相关文章

  1. 启用跨源请求 (CORS)

    https://docs.microsoft.com/zh-cn/aspnet/core/security/cors

  2. 已拦截跨源请求：同源策略禁止读取位于XXX的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'

    vue+springboot项目 前端发送请求微信 URL:http:/.........(企业微信的路径) 请求成功,数据发送过去可以接收到,处理完毕后发送返回值给我 我这边前端网络响应处可以看到返 ...

  3. Spring Boot全局支持CORS(跨源请求)

    import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet. ...

  4. 使用jsonp实现跨源请求

    jsonp 该技术用来实现跨源请求,即向协议.域名.端口号不同的服务器发送请求 通过使用 script 标签的 src 向服务器发送GET请求http://xxx/xxx?callback=callb ...

  5. JS 跨源请求

    一个 URL 大概包含的部分:scheme://host:port/path?#hash 比如一个 URL 为 http://www.xxx.com:8888/school/student.html, ...

  6. ArcGIS Server API for JavaScript调用错误：已阻止跨源请求：同源策略禁止读取位于......

    已阻止跨源请求:同源策略禁止读取位于 http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapSe ...

  7. 跨源资源共享(CORS)概念、实现（用Spring）、起源介绍

    本文内容引用自: https://howtodoinjava.com/spring5/webmvc/spring-mvc-cors-configuration/ https://developer.m ...

  8. Django-缓存机制、跨域请求(CORS)、ContentType组件

    Django缓存机制: 在settings中间件里面设置: 三个粒度: 1 全站缓存 用中间件: MIDDLEWARE = [ # 'django.middleware.cache.UpdateCac ...

  9. Firebug: 已拦截跨源请求：同源策略禁止读取位于XXX的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-

    第一种,就是在被请求的程序中添加HTTP头,即CORS跨域(跨域资源共享,Cross-Origin Resource Sharing) 如: Response.Headers.Add("Ac ...

随机推荐

  1. java编程规范大全

    JAVA编程规范大全 命名规范 定义这个规范的目的是让项目中所有的文档都看起来像一个人写的,增加可读性,减少项目组中因为换人而带来的损失.(这些规范并不是一定要绝对遵守,但是一定要让程序有良好的可读性 ...

  2. Codeforces 837D 动态规划

    Codeforces 837D 动态规划 传送门:https://codeforces.com/contest/837/problem/D 题意: 给你n个数,问你从这n个数中取出k个数,这k个数的乘 ...

  3. 2019 ICPC 陕西西安邀请赛 D. Miku and Generals

    传送门:https://nanti.jisuanke.com/t/39271 题意: 给你n个人,每个人有一个权值 a_i ​,(a_i​是可以被100整除的))现在需要你将n个人分成两组,有m个关系 ...

  4. Java并发机制的底层实现原理之volatile应用,初学者误看！

    volatile的介绍: Java代码在编译后会变成Java字节码,字节码被类加载器加载到JVM里,JVM执行字节码,最终需要转化为汇编指令在CPU上执行,Java中所使用的并发机制依赖于JVM的实现 ...

  5. wpf 自定义 ToolTip 模板

    示例是在blend中画的,圆角带阴影和倒三角 <Style x:Key="toolTipStyle" TargetType="ToolTip"> & ...

  6. 在Spring Boot中使用Docker在测试中进行高级功能测试

    最近又学到了很多新知识,感谢优锐课老师细致地讲解,这篇博客记录下自己所学所想. 想更多地了解Spring Boot项目中的功能测试吗?这篇文章带你了解有关在测试中使用Docker容器的更多信息. 本文 ...

  7. WebGPU学习（十）：介绍“GPU实现粒子效果”

    大家好,本文介绍了"GPU实现粒子效果"的基本思想,并推荐了相应的学习资料. 本文学习webgpu-samplers->computeBoids示例,它展示了如何用compu ...

  8. 为什么IIS应用程序池回收时间默认被设置为1740分钟?

    作者:斯科特 福赛斯/Scott Forsyth日期:2013/04/06地址:http://weblogs.asp.net/owscott/why-is-the-iis-default-app-po ...

  9. Linux忘记root密码后如何在grub界面中以单用户模式进入系统并重置密码的方法

    本文将介绍在Linux系统中忘记root用户密码的情况下,如何在gurb界面进入单用户模式并重置root用户密码.在单用户模式下,用户不需要输入任何密码即可进入系统并可以修改密码.实验步骤如下: 1. ...

  10. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...