正文 

当前位置： 首页 > 开发 > java教程

django实现跨域请求(代码片段)

zyk01 zyk01     2023-02-14     701

关键词：

目录

@
***
CORS 即 Cross Origin Resource Sharing 跨域资源共享.

跨域请求分两种：简单请求、复杂请求.

简单请求

简单请求必须满足下述条件.

HTTP方法为这三种方法之一：HEAD、GET、POST
·
HTTP头消息不超出以下字段：
Accept、Accept-Language、Content-Language、Last-Event-ID
·
且Content-Type只能为下列类型中的某一个：
application/x-www-from-urlencoded、
multipart/form-data、
text/plain.
·
==任何不满足上述要求的请求，都会被认为是复杂请求.
复杂请求会先发出一个预请求——预检，OPTIONS请求.==

浏览器的同源策略
·
无法跨域就是被浏览器的同源策略限制的.
也就是说，==浏览器会阻止非同源的请求.==
·
那什么是非同源呢？==域名或端口不同的，都属于非同源.==
·
==浏览器只会阻止表单以及Ajax请求的跨域，但不会阻止src请求跨域.==
所以，我们的cdn、图片等src请求都是正常的.
***

JsonP实现跨域

==JsonP跨域的原理是利用了浏览器不阻止src请求跨域来实现的.==
==JsonP只能实现GET请求跨域.==

首先 准备我们的视图文件

from django.http import HttpResponse
from rest_framework.views import APIView

class TestView(APIView):
    def get(self, request):
        return HttpResponse("handlerResponse(‘is ok‘)")
        # 注意返回的函数以及参数的格式

然后 HTML文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>JsonP跨站请求测试</title>
</head>
<body>
<script>
    // 函数名应为handlerResponse，这是一种约定俗成
    function handlerResponse(data) 
        alert(data)
    
</script>
<!--必须放在被执行函数的script标签的下面，否则会报错函数不存在-->
<script src="http://127.0.0.1:8000/test/"></script>
</body>
</html>

好了 我们来测试吧
技术分享图片
可以看到，我们成功实现了跨域获取数据.

JsonP解决跨域只能发送GET请求，并且实现起来前后端交互会比较多，现在几乎已经不在使用了.
***

在Django中间件中添加响应头

可实现简单请求和复杂请求的跨域

第一步 准备中间件

from django.utils.deprecation import MiddlewareMixin

class MyCors(MiddlewareMixin):
    def process_response(self, request, response):
        # 如下，等于‘*‘后，便可允许所有简单请求的跨域访问
        response[‘Access-Control-Allow-Origin‘] = ‘*‘

        # 判断是否为复杂请求
        if request.method == ‘OPTIONS‘:
            response[‘Access-Control-Allow-Headers‘] = ‘Content-Type‘
            response[‘Access-Control-Allow-Methods‘] = ‘PUT,PATCH,DELETE‘

        return response

写好之后，别忘记了去注册.

第二步 视图文件

from django.http import HttpResponse
from rest_framework.views import APIView

class TestView(APIView):
    def get(self, request):
        return HttpResponse("这是GET请求的数据")
    def post(self, request):
        return HttpResponse("这是POST请求的数据")
    def put(self, request):
        return HttpResponse("这是PUT请求的数")

第三步 HTML文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>test</title>
</head>
<body>
<button id="sign">点击发送跨站请求</button>
<script>
    $(‘#sign‘).click(function () 
        $.ajax(
            url: ‘http://127.0.0.1:8000/test/‘,  // 要访问的外站
            type: ‘put‘,  // 请求类型, put为复杂请求
            contentType: ‘application/json‘,  // 指定为‘application/json‘后，将变为复杂请求
            success: function (data) 
                // 请求成功后将执行该函数
                // data是外站发送过来的数据
                alert(data)
            ,
        );
    );
</script>
</body>
</html>

测试效果如下
技术分享图片
可见，我们实现了复杂请求的跨域，简单请求就更不用说了.

好了，就到这里吧.































django实现跨域请求(代码片段)

目录JsonP实现跨域在Django中间件中添加响应头@***CORS即CrossOriginResourceSharing跨域资源共享.跨域请求分两种：简单请求、复杂请求.简单请求简单请求必须满足下述条件.HTTP方法为这三种方法之一：HEAD、GET、POST·HTTP头消息不超出以下... 查看详情

跨域问题和django中实现跨域(代码片段)

跨域问题1.同源策略(浏览器的安全功能):请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同2.CORS跨域资源共享实现CORS通信的关键是服务器,只要服务器实现了CORS接口,就可以跨源通信3.CORS请求分为简单... 查看详情

django框架之跨域请求伪造(代码片段)

 浏览目录同源策略与Jsonp同源策略JsonpjQuery对JSONP的实现CORS简介两种请求 同源策略与Jsonp同源策略同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功... 查看详情

django框架之跨域请求伪造(代码片段)

 浏览目录同源策略与Jsonp同源策略JsonpjQuery对JSONP的实现CORS简介两种请求 同源策略与Jsonp同源策略同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功... 查看详情

django之跨域请求同源策略(代码片段)

同源策略：首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。而如果我们要跳过这个策略，也就是说非要跨域请求，那么就需要通过JSONP... 查看详情

django跨域请求处理(代码片段)

...t/qq_27068845/article/details/73007155http://blog.51cto.com/aaronsa/2071108django处理Ajax跨域访问　　使用javascript进行ajax访问的时候,出现如下错误出错原因：javascript处于安全考虑,不允许跨域访问。下图是对跨域访问的解释： 概念：　　这里 查看详情

django前后端分离跨域请求问题(代码片段)

一、问题背景　　之前使用django+vue进行前后端分离碰到跨域请求问题，跨域（域名或者端口不同）请求问题的本质是由于浏览器的同源策略导致的，当请求的响应不是处于同一个域名和端口下，浏览器不会接受响应，同源策略... 查看详情

前后端分离，解决跨域问题及django的csrf跨站请求保护(代码片段)

1.前后端分离解决跨域问题解决跨域调用服务并设置headers主要的解决方法需要通过服务器端设置响应头、正确响应options请求，正确设置JavaScript端需要设置的headers信息方能实现；关于跨域，前端会先发送OPTIONS请求，进行预检，... 查看详情

vue加入withcredentials后无法进行跨域请求(代码片段)

Vue和django的前后端分离项目，之前通过在django中允许跨域访问实现了跨域请求，但为了使每个请求带上session信息，我设置了withCredentials,即：axios.defaults.withCredentials =true然后跨域请求时会出现如下问题：Responsetopreflightrequestdoe... 查看详情

django框架（二十九）——跨域问题(代码片段)

...请求（一次请求）2、非简单请求（两次请求）四、CORS在Django中的应用1、简单请求2、非简单请求跨域问题一、同源策略只允许当前页面朝当前域下发请求，如果向其他域发请求，请求可以正常发送，数据也可以拿回，但是被浏... 查看详情

django解决跨域请求的问题(代码片段)

1.安装django-cors-headerspipinstalldjango-cors-headers2.配置settings.py文件INSTALLED_APPS=[...‘corsheaders‘，...]#添加中间件MIDDLEWARE=[‘django.middleware.security.SecurityMiddleware‘,#默认‘django.contrib.sessions.middleware.SessionMiddleware‘,#默认‘corsheaders.middlewa... 查看详情

跨域请求(代码片段)

...跨域资源共享）简介三CORS基本流程四CORS两种请求详解五Django项目中支持CORS回到目录一同源策略同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都... 查看详情

django跨域(代码片段)

什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。什么是同源策略？同源策略/SOP（Sameoriginpolicy）是一... 查看详情

聊一聊跨域，vue向django请求数据的一些问题(代码片段)

1.做前后端分离 前端使用Vue程序，后端使用Django配合rest-framework。那么前端Vue通过API接口拿到数据会出现跨域的问题，JSONP只是在get中会用到的，所以这里使用cors来解决一下。一个Vue程序通过ajax或者axios发送一个请求过来，... 查看详情

contenttype组件django缓存机制以及跨域请求(代码片段)

 1昨日回顾 版本控制*** （1）url=127.0.0.1/course/?version=v100000 1versioning_class=QueryParameterVersioning ‘VERSION_PARAM‘:‘version‘, ‘DEFAULT_VERSION‘:‘v2‘, ‘ALLOWED_VERSIONS‘:[‘v1‘,‘v2‘] 查看详情

django设置允许跨域请求(代码片段)

1.安装模块django-cors-headerspip3installdjango-cors-headers2.配置django项目的settings.py文件配置INSTALLED_APPSINSTALLED_APPS=[...,‘corsheaders‘]配置中间件,注意顺序MIDDLEWARE=[...,‘corsheaders.middleware.CorsMiddleware‘,‘django.middleware.common.CommonMiddleware‘]再... 查看详情

django跨域处理(代码片段)

 本节目录一同源和跨域二CORS通信实现跨域三Jsonp实现跨域 四xxx五xxx六xxx七xxx八xxx一同源和跨域　　　　同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的... 查看详情

django跨域支持(代码片段)

安装第三方模块：pipinstalldjango-cors-headerssettings.py中的配置INSTALLED_APPS=[...#解决跨域问题\'corsheaders\']#配置允许哪些客户端允许跨域ajax访问CORS_ORIGIN_WHITELIST=(#如果无效的话带上http://试试\'www.baidu.com:8080\')#允许ajax跨域请求时携带cook... 查看详情