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. vue的路由带参数和取参数,watch路由监听

    1.写在html里 <router-link :to="{path:'/goldShop/goodsInfo',query: { id:item.id }}" class=& ...

  2. POJ 3311 Hie with the Pie 兼 Codevs 2800 送外卖（动态规划->TSP问题）

    Description The Pizazz Pizzeria prides itself in delivering pizzas to its customers as fast as possi ...

  3. vue依赖

    ajax:vue-resource moke数据:body-parser

  4. Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果

    一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...

  5. Java 注解与单元测试

    注解 Java注解是在JDK1.5 之后出现的新特性,用来说明程序的,注解的主要作用体现在以下几个方面: 编译检查,例如 @Override 编写文档,java doc 会根据注解生成对应的文档 代码 ...

  6. 使用springboot + druid + mybatisplus完成多数据源配置

    一. 简介 1. 版本 springboot版本为2.0.3.RELEASE,mybatisplus版本为2.1.9, druid版本为1.1.9,swagger版本为2.7.0 2. 项目地址   ...

  7. 软件包查询-rpm查询常用命令

    软件包查询 〇.测试环境[root@osker ~]# cat /etc/redhat-release CentOS Linux release 7.7.1908 (Core)[root@osker ...

  8. 「洛谷P1231」教辅的组成 解题报告

    P1231 教辅的组成 题目背景 滚粗了的HansBug在收拾旧语文书,然而他发现了什么奇妙的东西. 题目描述 蒟蒻HansBug在一本语文书里面发现了一本答案,然而他却明明记得这书应该还包含一份练习 ...

  9. 面试中经常问到的Redis七种数据类型，你都真正了解吗？

    前言 Redis不是一个简单的键值对存储,它实际上是一个支持各种类型数据结构的存储.在传统的键值存储中,是将字符串键关联到字符串值,但是在Redis中,这些值不仅限于简单的字符串,还可以支持更复杂的数 ...

  10. zabbix监控web应用日志报警并发送消息到钉钉

    首先在钉钉上开启钉钉机器人功能 说明:自定义关键词是zabbix发送过来的消息内容必须含有你定义的ERROR或者error字段,否则消息无法发送过来 ip地址段:一般都是zabbix-server的I ...