Django 多方式实现跨域访问

2023年8月4日下午2:34 • Python • 阅读 56

一、什么是跨域

1.1 跨越介绍

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。
域可以理解为： 协议 + 域名 + 端口号

在前后端不分离的项目中，前端使用ajax发起请求时，前端发起请求的域与后端定义API的域一致，故不会存在跨域问题
在前后端分离的项目中，前端使用ajax或者axios发起请求，前后端各自运行在自己的域下，所以在发起请求的时候就会造成跨域，比如前端使用脚手架创建，运行在 http://127.0.0.1:8080 后端运行在 http://127.0.0.1:8000 端口，当前端发起请求时，因为域（端口不一致）不同，就会造成跨域，浏览器便会阻止该请求。

1.2 跨域分类

跨域请求分为2种，一种是简单请求，一种是复杂请求。

*简单请求

只要同时满足以下两大条件，就属于简单请求
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请求都可以发~~

2.1 Ajax测试

当我们向后端发起GET请求时，后端没有做跨域访问。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
    <title>跨域请求测试title>
head>

<body>
    <div id="app">
        <button  @click="Send">发送请求button>
    div>
body>
<script>
    new Vue({
        el:"#app",
        methods:{
            Send(){
                axios.get('http://127.0.0.1:8000/api/test/')
                  .then(function (response) {

                    console.log(response);
                  })
                  .catch(function (error) {

                    console.log(error);
                  })
            }
        }
    })
script>
html>

浏览器给出提示。从origin ‘null’访问’http://127.0.0.1:8000/api/test/’的XMLHttpRequest已经被CORS[跨域资源共享]策略阻止:没有’Access- control – allow – origin ‘头在请求的资源上存在。

我们在后端也发现，请求已经进来了，并成功返回了。所以数据被浏览器给劫持了
Django 多方式实现跨域访问

2.2 src 测试

当我们使用 img script 标签的src来发起一个GET请求，会触发CORB（Cross-Origin Read Blocking ）跨域读取阻塞。
当跨域请求回来的数据 MIME type 同跨域标签应有的 MIME 类型不匹配时，浏览器会启动 CORB 保护数据不被泄漏，被保护的数据类型只有 html xml 和 json。很明显 <script> </code>和 <code><img> </code>等跨域标签应有的<code> MIME type</code> 和<code> html</code> 、<code>xml</code>、<code>json</code> 不一样。 <img src="https://img-blog.csdnimg.cn/e4a6f695c2a14a5b91081bab4f700729.png"><blockquote>详情可以看这篇文章 https://juejin.cn/post/6844903831373889550</blockquote><h1><a id="_83">;</a>三，解决跨域访问</h1><h2>3.1 请求方式添加Headers来解决跨域问题</h2><h3><a id="311_GET_85"></a>3.1.1 简单请求处理----以GET请求为例</h3>在前面的测试时，我们发现请求已经到达，响应后被浏览器拦截了，所以需要我们告诉浏览器不要拦截 我这里使用的是django作为Web后端开发框架，当我们发起GET请求时，我们在后端添加浏览器所需要对应的请求体参数<code>Access-Control-Allow-Origin</code>1.在TestView视图函数添加请求参数<pre><code class="prism language-python">def TestView(request): data = { "user": "jack", "pwd": "123", } if request.method == 'GET': return HttpResponse(json.dumps(data),content_type='application/json') </code></pre>4.重新启动，在此进行测试 前端代码如上，测试成功 <img src="https://img-blog.csdnimg.cn/d40d15e855a04824943b7214cef6444c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUmkwbg==,size_20,color_FFFFFF,t_70,g_se,x_16"> 注意：在进行post测试时，为了方便，我们需要注释掉django的csrf中间件，这是django自带的防止跨域请求伪造。 增加一个post方法判断<pre><code class="prism language-python">def TestView(request): data = { "user": "jack", "pwd": "123", } if request.method == 'GET': return HttpResponse(json.dumps(data),content_type='application/json') if request.method == 'POST': return HttpResponse(json.dumps(data),content_type='application/json') </code></pre><pre><code class="prism language-python"> MIDDLEWARE = [ ...... 'django.middleware.common.CommonMiddleware', <pre><code>'django.contrib.auth.middleware.AuthenticationMiddleware', ...... </code></pre> ] </code></pre><blockquote>详细了解csrf：https://juejin.cn/post/6844903653757698062.</blockquote><h3><a id="312__130"></a>3.1.2 复杂请求处理</h3>复杂请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是<code>application/json</code>。复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"（OPTIONS）请求（preflight）。 浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。PUT方法测试<ol><li>修改前端代码<code> method: 'put'</code>发送一个put请求过去。 当发送<code>put</code>请求时，先送过来的是一个<code>options</code>请求，浏览器数据请求失败了，我们需要先在<code>options</code>请求的<code>headers</code>中添加<code>Access-Control-Allow-Origin</code> <img src="https://img-blog.csdnimg.cn/70dbfe4a67d0480b9c8f4c22d2774692.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUmkwbg==,size_20,color_FFFFFF,t_70,g_se,x_16"></li><li>后端增加一个options判断，并添加<code>Access-Control-Allow-Origin</code></li></ol><pre><code class="prism language-python"> if request.method == 'OPTIONS': return HttpResponse(headers={"Access-Control-Allow-Origin":""}) if request.method == 'PUT': return HttpResponse(json.dumps(data)) </code></pre><ol><li>此时浏览器返回没有<code>Access-Control-Allow-Methods</code> ，表示PUT方法不被允许。我们在<code>PUT和OPTIONS的headers</code>中都再添加一个<code>Access-Control-Allow-Methods</code> ，然后前端继续发送PUT <img src="https://img-blog.csdnimg.cn/258bf3c9bc8d449d87a309c036caed8e.png"></li><li>添加了<code>Access-Control-Allow-Methods</code></li></ol><pre><code class="prism language-python"> if request.method == 'OPTIONS': return HttpResponse(headers={"Access-Control-Allow-Origin":"","Access-Control-Allow-Methods":"PUT"}) if request.method == 'PUT': return HttpResponse(json.dumps(data),headers={"Access-Control-Allow-Origin":"","Access-Control-Allow-Methods":"PUT"}) </code></pre><ol><li>前端数据获取成功了 <img src="https://img-blog.csdnimg.cn/18260d7af15b42998feb6428388a4c15.png"></li></ol>JSON数据测试 前端携带一个json数据，向后端发送post请求，因为Content-Type中不包含JSON格式的数据，所以该请求为复杂请求 6. 前端携带JSON数据<pre><code class="prism language-js">Send(){ axios({ method: 'post', url: 'http://127.0.0.1:8000/api/test/', data:{ "course_id":1, "course_title":"中华上下五千年深度解说" } }) .then(response => { console.log(response) }); } </code></pre><ol><li>后端接收</li></ol><pre><code class="prism language-python">def TestView(request): data = { "user": "jack", "pwd": "123", } print(request.method) if request.method == 'GET': return HttpResponse(json.dumps(data)) if request.method == 'POST': return HttpResponse(json.dumps(data)) if request.method == 'OPTIONS': return HttpResponse(headers={"Access-Control-Allow-Origin":"","Access-Control-Allow-Methods":"PUT"}) if request.method == 'PUT': return HttpResponse(json.dumps(data),headers={"Access-Control-Allow-Origin":"","Access-Control-Allow-Methods":"PUT"}) return HttpResponse("okokok") </code></pre><ol><li>此时，浏览器提示我们需要添加<code>Access-Control-Allow-Headers</code> <img src="https://img-blog.csdnimg.cn/c92dbbf3db2a4d4881e109d3b58dab46.png"></li><li>我们在POST和OPTIONS中都添加上去，浏览器数据接收成功了</li></ol><pre><code class="prism language-python">if request.method == 'POST': return HttpResponse(json.dumps(data),headers={"Access-Control-Allow-Origin":"","Access-Control-Allow-Methods":"PUT","Access-Control-Allow-Headers":"content-type"}) if request.method == 'OPTIONS': return HttpResponse(headers={"Access-Control-Allow-Origin":"*","Access-Control-Allow-Methods":"PUT","Access-Control-Allow-Headers":"content-type"}) </code></pre><img src="https://img-blog.csdnimg.cn/50c45fab15f64bee9e3555a78f292fe7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUmkwbg==,size_20,color_FFFFFF,t_70,g_se,x_16"><h2><a id="32__208"></a>3.2 定义中间件来处理跨域问题</h2>在上述的函数中，通过定义headers来处理跨域的多种情况，过于繁琐。我们可以写一个中间件来统一处理跨域问题 1.创建CorsMiddleware.py<pre><code class="prism language-python">from django.utils.deprecation import MiddlewareMixin class CorsMiddleware(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"] = "DELETE, PUT, POST" return response </code></pre>2.在Settings.py 配置文件的中间件中添加<pre><code class="prism language-python">MIDDLEWARE = [ ...... 'django.middleware.clickjacking.XFrameOptionsMiddleware', 'GOMusicApi.utils.cors_middleware.CorsMiddleware', ] </code></pre>3. 重新书写视图，去掉所有的headers，重启项目<pre><code class="prism language-python"> from django.http import JsonResponse,HttpResponse from rest_framework.views import APIView class TestView(APIView): def post(self,request): print(request.body.decode('utf-8')) data = { "user": "jack", "password": "12333", } return JsonResponse(data,safe=False) def TestView(request): print(request.method) if request.method == 'POST': print(request.body.decode('utf-8')) data = { "user": "jack", "password": "12333", } return JsonResponse(data,safe=False) return JsonResponse(data,safe=False) </code></pre><img src="https://img-blog.csdnimg.cn/d766acb446a44f4286f418610b95577a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUmkwbg==,size_20,color_FFFFFF,t_70,g_se,x_16"><h2>3.3 使用Django-cors-Headers 来处理跨域问题</h2>1. 安装<pre><code class="prism language-python">pip install django-cors-headers </code></pre>2. 在settings文件中进行配置<pre><code class="prism language-python">INSTALLED_APPS = [ ...... 'django.contrib.staticfiles', 'corsheaders', ] MIDDLEWARE_CLASSES = [ ..... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ...... ] </code></pre>3. Django-cors-Headers 配置介绍 在 Django 设置中配置中间件的行为。您必须至少设置以下三个设置之一：<pre><code class="prism language-python">CORS_ALLOWED_ORIGINS CORS_ALLOWED_ORIGIN_REGEXES CORS_ALLOW_ALL_ORIGINS </code></pre><ul><li><code>CORS_ALLOWED_ORIGINS</code><pre><code class="prism language-python">CORS_ALLOWED_ORIGINS = [ "https://example.com" , "https://sub.example.com" , "http://localhost:8080" , "http://127.0.0.1:9000" , ] </code></pre></li></ul>以前此设置称为<code>CORS_ORIGIN_WHITELIST</code>，它仍然作为别名使用，新名称优先【注意是django3.2使用新名称】<ul><li><code>CORS_ALLOWED_ORIGIN_REGEXES</code> 一个字符串列表，表示与授权进行跨站点 HTTP 请求的 Origin 匹配的正则表达式。默认为[]。当 <code>CORS_ALLOWED_ORIGINS</code>不切实际时很有用，例如当您有大量子域时。<pre><code class="prism language-python">CORS_ALLOWED_ORIGIN_REGEXES = [ r "^https://\w+.example.com$" , ] </code></pre></li></ul>以前此设置称为<code>CORS_ORIGIN_REGEX_WHITELIST</code>，它仍然作为别名使用，新名称优先。【注意是django3.2使用新名称】<ul><li><code>CORS_ALLOW_ALL_ORIGINS</code> 如果True，将允许所有来源。其他限制允许来源的设置将被忽略。默认为False。 将此设置为True可能很危险，因为它允许任何网站向您的网站发出跨域请求。通常，您需要使用<code>CORS_ALLOWED_ORIGINS</code>或 <code>CORS_ALLOWED_ORIGIN_REGEXES</code>限制允许的来源列表。</li></ul>以前此设置称为<code>CORS_ORIGIN_ALLOW_ALL</code>，它仍然作为别名使用，新名称优先。【注意是django3.2使用新名称】这下面都是一些可选设置了，代码块中为默认值，一般默认值足够了<ul><li><code>CORS_ALLOW_METHODS</code> 实际请求允许的 HTTP 动词列表<pre><code class="prism language-python">CORS_ALLOW_METHODS = [ "DELETE" , "GET" , "OPTIONS" , "PATCH" , "POST" , "PUT" , ] </code></pre></li><li><code>CORS_ALLOW_HEADERS</code> 发出实际请求时可以使用的非标准 HTTP 标头列表。<pre><code class="prism language-python">CORS_ALLOW_HEADERS = [ "accept" , "accept-encoding" , "authorization" , "content-type" , "dnt" , "origin" , "user-agent" , "x-csrftoken" , "x-requested-with" , ] </code></pre><ul><li><code>CORS_ALLOW_CREDENTIALS</code> 如果为<code>True</code>，cookie 将被允许包含在跨站点 HTTP 请求中。默认为False。</li></ul></li></ul>注意：在 Django 2.1 中添加了SESSION_COOKIE_SAMESITE设置，默认设置为 "Lax"，这将阻止 Django 的会话 cookie 跨域发送。将其更改为无以绕过此安全限制。<blockquote>详情链接：https://pypi.org/project/django-cors-headers/</blockquote>4. 我的配置<pre><code class="prism language-python"> CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_WHITELIST = ( 'http://127.0.0.1:8000', 'http://localhost:8000', 'http://192.168.1.107:8080' ) CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) CORS_ALLOW_HEADERS = ( 'XMLHttpRequest', 'X_FILENAME', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', 'Pragma', ) </code></pre>配置成功后，前端可以成功访问后端。<h2><a id="34__397"></a>3.4 总结</h2>浏览器对不同域之间做出的行为，对应不同的请求（简单请求和复杂请求）做出了不同的拦截方式，也就解释了为什么要添加请求参数。 <code>Access-Control-Allow-Origin </code> ：为了解决域不一致的问题； <code>Access-Control-Allow-Methods</code> ：为了解决PUT，DELETE等方法 <code>Access-Control-Allow-Headers</code>：为了解决JSON数据传输的问题</script>

Original: https://blog.csdn.net/m0_56966142/article/details/123517454
Author: Ri0n
Title: Django 多方式实现跨域访问

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/734154/

转载文章受原作者版权保护。转载请注明原作者出处！

python

【自取】最近整理的，有需要可以领取学习：

Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言刷题答案下载！

Django项目实战之点餐系统第二章:后台管理子系统功能实现

Django项目实战之点餐系统第二章:后台管理子系统功能实现一、项目基本设置 1、经过上一章的项目框架搭建，我们的项目框架如下图所示2、打开hotelproject文件夹里面的s…

Python 2023年8月4日
0058
linux部署flask服务器（前台）

云服务器部署flask服务器实现前后端分离的过程中，使用云服务器部署相应的服务器显得十分重要，外部前端网页可以通过外网ip和端口进行请求获取相应的数据使用工具宝塔阿里云云服…

Python 2023年8月13日
0060
SpringBoot怎么自定义一个Starter ？

小伙伴们曾经可能都经历过整天写着CURD的业务，都没写过一些组件相关的东西，这篇文章记录一下SpringBoot如何自定义一个Starter。原理和理论就不用多说了，可以在网上找到…

Python 2023年10月15日
0033
【tensorflow】module ‘tensorflow.python.keras.utils.generic_utils‘ has no attribute populate_dict_with

遇到这个问题参考:https://stackoverflow.com/posts/61347413/editmodule ‘tensorflow.python.ker…

Python 2023年6月3日
0093
Pytest之收集用例及命令行参数

在上一篇Pytest系列文章：Pytest之基本介绍，主要介绍Pytest特点、安装配置及简单运行。以下主要介绍：Pytest的用例收集规则及命令行参数详解。一、用例收集 1 …

Python 2023年9月11日
0046
python入门

单行注释这是单行注释多行注释 ”’ 这是多行注释 ”’ 1.注释一块内容打印3次hello print("hello") print("h…

Python 2023年11月1日
0034
思维方式之概率思维

如果现在有两个按钮，按下红色按钮，你可以直接拿走100万美元；按下蓝色按钮，有一半机会，你可以拿到1亿美元，但还有一半机会，你什么都拿不到。你会选哪一个？你会按红色按钮，直接拿走…

Python 2023年9月27日
0039
Android如何实现实时音视频会议的背景分割

1 背景分割功能简介 ZegoEffects SDK AI视觉SDK提供背景分割功能，适用于在线教育、视频会议、美发、短视频等多种场景。 2 视频中背景分割功能实现的前提条件在使…

Python 2023年10月25日
0033
图像去雾学习总结

前言：本来题目想作为如何学习图像去雾，去雾字如其名，而学习是学会去雾方面相关的知识。但是后来一想，每个研究方向均是一片海洋，而自己是半瓶不满的杯水，如何教别人呢，因此本文只能算作…

Python 2023年9月27日
0050
requests 分类多级页面_Scrapy爬取多级加分页+Requests爬取豆瓣新片top10并存储MongoDB…

Scrapy爬取多级加分页+Requests爬取豆瓣新片top10并存储MongoDB Scrapy爬取多级加分页+Requests爬取豆瓣新片top10并存储MongoDB 爬取…

Python 2023年10月6日
0039
pytorch搭建卷积神经网络【第五课_tensor基本操作】

文章目录 * – 前言* 一、创建列表* 二、创建tensor* 三、numpy/tensor互转* 四、创建修改tensor* 五、查看tensor属性* 六、ten…

Python 2023年8月26日
0057
scrapy框架的保存文件的几种方式

在scrapy创建成功后，在自动生成的目录中会有items.py文件和pipelines.py文件，这两个都是可以用来保存文件的。下面就来写一下这两个文件的保存文件的方式。使用i…

Python 2023年10月1日
0044
pandas csv转json_十分钟学习pandas！ pandas常用操作总结！

学习Python, 当然少不了pandas，pandas是python数据科学中的必备工具，熟练使用pandas是从sql boy/girl 跨越到一名优秀的数据分析师傅的必备技能…

Python 2023年8月21日
0053
ARMA模型的性质之ARMA模型

目录一、ARMA模型的定义二、平稳条件与可逆条件三、传递形式与逆转形式四、ARMA(p,q)模型的统计性质 1.均值 2.自协方差函数 3.自相关系数 4.ARMA(p,q…

Python 2023年9月7日
0055
分布式机器学习：PageRank算法的并行化实现（PySpark）

算法的完整实现代码我已经上传到了GitHub仓库：Distributed-ML-PySpark（包括其它分布式机器学习算法），感兴趣的童鞋可以前往查看。我们在博客《数值分析：幂迭…

Python 2023年10月25日
0038
Django 系列官方教程[3]Views and templates

续第二章，这里开始创建视图一、概述视图是Django应用程序中的一种”类型”的网页，通常提供特定的功能并具有特定的模板。例如，在博客应用程序中，可能有以…

Python 2023年8月5日
0060

2024 年 5 月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Django 多方式实现跨域访问

1.1 跨越介绍

1.2 跨域分类

2.1 Ajax测试

2.2 src 测试

大家都在看