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. jquery超级简单的后台系统自适应框架

    系统后台自适应简单框架 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta http-equ ...

  2. IdentityServer4 Clients

    原文地址 Clients 的定义 Client是指那些从 identityserver获取 token的应用 通常需要为client定义下面通用的设置 唯一的client id secret, 如果需 ...

  3. 定位、识别；目标检测，FasterRCNN

    定位: 针对分类利用softmax损失函数,针对定位利用L2损失函数(或L1.回归损失等) 人关节点检测 针对连续变量和离散变量需要采用不同种类的损失函数. 识别: 解决方案: 1.利用滑动窗口,框的 ...

  4. 使用element的upload组件实现一个完整的文件上传功能（上）

    说到标题就有点心塞了,前段时间项目上需要实现一个文件上传的功能,然后就咔咔的去用了element的upload组件,不用不知道一用吓一跳哇. 在使用的过程中遇到了很多让意想不到的问题,后来也因为时间问 ...

  5. 如何把对象手动注入Spring容器并实现依赖注入

    将对象注入到Spring容器并实现依赖注入 public class UserDao { @Resource AccountService accountService; public void pr ...

  6. 大学最新毕业论文参考文献，包含java，jsp，mysql，Android，sql，PHP

    每当毕业论文写到最后需要参考文献时,往往是很令人头疼的,因为有的老师对参考文献的要求是很多的,比如需要国内的和国外的,时间必须是近三年的,满足XXX要求的文献至少需要三篇以上等等.今天我就来给大家整理 ...

  7. $HDOJ5542\ The\ Battle\ of\ Chibi$ 数据结构优化$DP$

    $AcWing$ $Description$ $Sol$ 首先显然是是以严格递增子序列的长度为阶段,由于要单调递增,所以还要记录最后一位的数值 $F[i][j]$表示前$i$个数中以$A_i$结尾的长 ...

  8. [技术翻译]使用Nuxt生成静态网站

    本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响 ...

  9. shell点名脚本不重复人名

    效果如图: 代码如下: #!/bin/bash #Author:GaoHongYu #QQ: #Time:-- :: #Name:dm.sh #Version:V1. stu=(刘一 陈二 张三 李四 ...

  10. [推荐]icheck-bootstrap(漂亮的ckeckbox/radiobox)

    适用于Twitter Bootstrap框架的纯CSS样式的复选框/单选框按钮的插件. GitHub:https://github.com/bantikyan/icheck-bootstrap 如果你 ...