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. Total Commander 显示文件包含文件名扩展

    在默认的 Total Commander 是分开文件名和文件扩展,如果想要让文件名同时显示扩展,可以通过设置合并文件名和扩展两列 点击配置,在选项的制表修改显示 How to configure To ...

  2. 随机生成验证码（JS）

    效果展示 实现原理 1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计. 2. JS:1)将所有的验证码所 ...

  3. gu集合

    离散型随机变量的一切可能的取值  与对应的概率  乘积之和称为该离散型随机变量的数学期望,本题期望是概率乘得分之和 数列是递增的,可以枚举第二小的数,假设选第i个数为第2小的数,则第1小的数有i-1种 ...

  4. LuoguP3045牛券Cow Coupons

    LuoguP3045 [USACO12FEB]牛券Cow Coupons 果然我贪心能力还是太差了 ZR讲过的原题我回来对做法没有一丁点印象 有时候有这样一种题目 每个数有两种不同的价值 你可以选择价 ...

  5. Microsoft Ignite The Tour Beijing 记录: Learn Connect Explore

    坦率的说,这是我第一次以讲师的身份参加微软的Ignite大会.同时我也很开心能作为微软社区MVP来参加这个活动.而我的演讲主题也和我的社区有关——Unity.C#以及跨平台开发. 这篇用来记录MSIg ...

  6. ie6 ie7下，Li不能自动换行，出现竖排文字现象（PS：li不固定宽度，所有li同一行显示），在ie8却可以

    好久没写CSS,今天又发现一个ie兼容问题. 我需要所有的li在同一行显示,不固定Li的宽度,如果一行排不下,需要自动换行.当然Li的内容长度不同. 必须在li加white-space:nowrap; ...

  7. Hbase概念原理扫盲

    一.Hbase简介 1.什么是Hbase Hbase的原型是google的BigTable论文,收到了该论文思想的启发,目前作为hadoop的子项目来开发维护,用于支持结构化的数据存储. Hbase是 ...

  8. codeforces 1167B Lost Numbers

    传送门:https://codeforces.com/contest/1167/problem/B 题意: 交互题:现在你有6个数4, 8, 15, 16, 23, 42组成的某种组合,你可以询问系统 ...

  9. iOS-NSNotificationCenter通知原理解析

    一.基本概念 NSNotification和NSNotificationCenter是使用观察者模式来实现的用于跨层传递消息. NSNotificationCenter采用单例模式. 二.基本实现 通 ...

  10. NB的程序员,亮瞎了你的眼吗？

    郑重声明: 本文首发于人工博客 1.导读 你能想象到1K的代码能写出什么样的功能强大.效果炫酷的作品吗?来吧,今天小编带领大家认识下下面这位大神的作品. 西班牙程序员Roman Cortes用纯Jav ...