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. 面试题 —— Ajax的基本原理总结

    Ajax 的全称是Asynchronous JavaScript and XML(异步的JavaScript 和 XML),其中,Asynchronous 是 异步 的意思,它有别于传统web开发中采 ...

  2. CF1088F Ehab and a weird weight formula

    CF1088F Ehab and a weird weight formula 推性质猜结论题 第一步转化,考虑把点的贡献加到边里: $con=\sum (log_2(dis(a_u,a_b))\ti ...

  3. git 上传当前分支

    因为我现在的分支是的名很长,每次需要上次当前分支需要写很多代码,是不是有很简单方法上传当前分支. 如果要上传一个分支到仓库 origin 那么就需要使用下面的命令 git push origin 分支 ...

  4. Spring Boot 嵌入式Web容器

    目录 前言 1.起源 2.容器启动流程解析 2.1.获取应用类型 2.2.容器启动流程 3.加载 Web 容器工厂 4.总结 前言         最近在学习Spring Boot相关的课程,过程中以 ...

  5. pytorch中DataLoader, DataSet, Sampler之间的关系

    转自:https://mp.weixin.qq.com/s/RTv0cUWvc0kuXBeNoXVu_A 自上而下理解三者关系 首先我们看一下DataLoader.__next__的源代码长什么样,为 ...

  6. layui treeSelect

    官方地址:https://fly.layui.com/extend/treeSelect/ 下面介绍一下这个插件的使用方法 1.html页面 <div class="layui-inp ...

  7. tomcat启动慢问题

    sed -i 's/securerandom\.source\=file\:\/dev\/random/securerandom\.source\=file\:\/dev\/urandom/g' $J ...

  8. 微信支付与支付宝支付java开发注意事项

    说明:这里只涉及到微信支付和淘宝支付 以官网的接口为准,主要关注[网关].[接口].[参数][加密方式][签名][回调] 第一步,了解自己的项目要集成的支付方式 常见的有扫码支付.网页支付.APP支付 ...

  9. StatePattern(状态模式)-----Java/.Net

    在状态模式(State Pattern)中,类的行为是基于它的状态改变的.这种类型的设计模式属于行为型模式. 在状态模式中,我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context ...

  10. sql计算上一周（解决了跨年会出错的问题）

    1.问题描述: 使用YEARWEEK('时间字段')=YEARWEEK(NOW())-1来筛选上一周数据时,当遇到跨年的时候会出现计算错误的问题. eg: 如上图,当前日期为2020年1月6日.上图标 ...