Django 多方式实现跨域访问

已于 2022-09-16 21:23:12 修改
阅读量5.6k 收藏 55
点赞数 22
分类专栏： Python 文章标签： django 前端 javascript
于 2022-03-16 22:18:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56966142/article/details/123517454
版权

一、什么是跨域

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 '头在请求的资源上存在。
在这里插入图片描述
我们在后端也发现，请求已经进来了，并成功返回了。所以数据被浏览器给劫持了
在这里插入图片描述

2.2 src 测试

当我们使用img script 标签的src来发起一个GET请求，会触发CORB（Cross-Origin Read Blocking ）跨域读取阻塞。
当跨域请求回来的数据 MIME type 同跨域标签应有的 MIME 类型不匹配时，浏览器会启动 CORB 保护数据不被泄漏，被保护的数据类型只有 html xml 和 json。很明显 <script> 和 <img> 等跨域标签应有的 MIME type 和 html 、xml、json 不一样。
在这里插入图片描述

详情可以看这篇文章 https://juejin.cn/post/6844903831373889550

三，解决跨域访问

3.1 请求方式添加Headers来解决跨域问题

3.1.1 简单请求处理----以GET请求为例

在前面的测试时，我们发现请求已经到达，响应后被浏览器拦截了，所以需要我们告诉浏览器不要拦截
我这里使用的是django作为Web后端开发框架，当我们发起GET请求时，我们在后端添加浏览器所需要对应的请求体参数Access-Control-Allow-Origin

1.在TestView视图函数添加请求参数

def TestView(request):
    data = {
        "user": "jack",
        "pwd": "123",
    }
    if request.method == 'GET':
        return HttpResponse(json.dumps(data),content_type='application/json')

4.重新启动，在此进行测试
前端代码如上，测试成功
在这里插入图片描述
注意：在进行post测试时，为了方便，我们需要注释掉django的csrf中间件，这是django自带的防止跨域请求伪造。
增加一个post方法判断

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')

# settings.py django的配置文件下
MIDDLEWARE = [
    ......
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    ......
]

详细了解csrf：https://juejin.cn/post/6844903653757698062.

3.1.2 复杂请求处理

复杂请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"（OPTIONS）请求（preflight）。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

PUT方法测试

  1. 修改前端代码 method: 'put'发送一个put请求过去。
    当发送put请求时，先送过来的是一个options请求，浏览器数据请求失败了，我们需要先在options请求的headers中添加Access-Control-Allow-Origin
    在这里插入图片描述
  2. 后端增加一个options判断，并添加Access-Control-Allow-Origin
# 在原来的视图函数中增加
    if request.method == 'OPTIONS':
        return HttpResponse(headers={"Access-Control-Allow-Origin":"*"})
    if request.method == 'PUT':
        return HttpResponse(json.dumps(data))
  1. 此时浏览器返回没有Access-Control-Allow-Methods ，表示PUT方法不被允许。我们在PUT和OPTIONS的headers中都再添加一个Access-Control-Allow-Methods ，然后前端继续发送PUT
    在这里插入图片描述
  2. 添加了Access-Control-Allow-Methods
    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"})
  1. 前端数据获取成功了
    在这里插入图片描述

JSON数据测试
前端携带一个json数据，向后端发送post请求，因为Content-Type中不包含JSON格式的数据，所以该请求为复杂请求
6. 前端携带JSON数据

Send(){
	axios({
	  method: 'post',
	  url: 'http://127.0.0.1:8000/api/test/',
	  data:{
	  	"course_id":1,
	  	"course_title":"中华上下五千年深度解说"
	  	}
	  })
	  .then(response => {
	   	console.log(response)
	  });
}
  1. 后端接收
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")
  1. 此时，浏览器提示我们需要添加Access-Control-Allow-Headers
    在这里插入图片描述
  2. 我们在POST和OPTIONS中都添加上去，浏览器数据接收成功了
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"})

在这里插入图片描述

3.2 定义中间件来处理跨域问题

在上述的函数中，通过定义headers来处理跨域的多种情况，过于繁琐。我们可以写一个中间件来统一处理跨域问题
1.创建CorsMiddleware.py

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

2.在Settings.py 配置文件的中间件中添加

MIDDLEWARE = [
	......
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'GOMusicApi.utils.cors_middleware.CorsMiddleware',
]

3. 重新书写视图，去掉所有的headers，重启项目

# 这里使用了rest_framework 
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 函数来实现返回数据
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)	
    # 这里return，因为先发送了options请求，故需要一个返回，不然后端会报没有返回对象的错误。

在这里插入图片描述

3.3 使用Django-cors-Headers 来处理跨域问题

1. 安装

pip install django-cors-headers

2. 在settings文件中进行配置

INSTALLED_APPS = [
 ......
 'django.contrib.staticfiles',
 'corsheaders',
]

MIDDLEWARE_CLASSES = [
 .....
 'corsheaders.middleware.CorsMiddleware',
 'django.middleware.common.CommonMiddleware',
 ......
]

3. Django-cors-Headers 配置介绍
在 Django 设置中配置中间件的行为。您必须至少设置以下三个设置之一：

CORS_ALLOWED_ORIGINS	# 默认为空列表，设置允许发送http请求的域名
CORS_ALLOWED_ORIGIN_REGEXES	# 允许域名列表使用正则模式
CORS_ALLOW_ALL_ORIGINS		# 运行所有的域名访问

  • CORS_ALLOWED_ORIGINS

    CORS_ALLOWED_ORIGINS  =  [ 
    "https://example.com" , 
    "https://sub.example.com" , 
    "http://localhost:8080" , 
    "http://127.0.0.1:9000" , 
]

以前此设置称为CORS_ORIGIN_WHITELIST，它仍然作为别名使用，新名称优先 【注意是django3.2使用新名称】

  • CORS_ALLOWED_ORIGIN_REGEXES
    一个字符串列表，表示与授权进行跨站点 HTTP 请求的 Origin 匹配的正则表达式。默认为[]。当 CORS_ALLOWED_ORIGINS不切实际时很有用，例如当您有大量子域时。

    CORS_ALLOWED_ORIGIN_REGEXES  =  [ 
    r "^https://\w+\.example\.com$" , 
]

以前此设置称为CORS_ORIGIN_REGEX_WHITELIST，它仍然作为别名使用，新名称优先。【注意是django3.2使用新名称】

  • CORS_ALLOW_ALL_ORIGINS
    如果True，将允许所有来源。其他限制允许来源的设置将被忽略。默认为False。
    将此设置为True可能很危险，因为它允许任何网站向您的网站发出跨域请求。通常，您需要使用CORS_ALLOWED_ORIGINS或 CORS_ALLOWED_ORIGIN_REGEXES限制允许的来源列表。

以前此设置称为CORS_ORIGIN_ALLOW_ALL，它仍然作为别名使用，新名称优先。【注意是django3.2使用新名称】

这下面都是一些可选设置了，代码块中为默认值，一般默认值足够了

  • CORS_ALLOW_METHODS
    实际请求允许的 HTTP 动词列表

    CORS_ALLOW_METHODS  =  [ 
    "DELETE" , 
    "GET" , 
    "OPTIONS" , 
    "PATCH" , 
    "POST" , 
    "PUT" , 
]

  • CORS_ALLOW_HEADERS
    发出实际请求时可以使用的非标准 HTTP 标头列表。

    CORS_ALLOW_HEADERS  =  [ 
    "accept" , 
    "accept-encoding" , 
    "authorization" , 
    "content-type" , 
    "dnt" , 
    "origin" , 
    "user-agent" , 
    "x-csrftoken" , 
    "x-requested-with" , 
]
    • CORS_ALLOW_CREDENTIALS
      如果为True，cookie 将被允许包含在跨站点 HTTP 请求中。默认为False。

注意：在 Django 2.1 中添加了SESSION_COOKIE_SAMESITE设置，默认设置为 “Lax”，这将阻止 Django 的会话 cookie 跨域发送。将其更改为无以绕过此安全限制。

详情链接：https://pypi.org/project/django-cors-headers/

4. 我的配置

# --------------------------------------- 跨域请求配置 cors ---------------------------------------#
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie
# CORS_ORIGIN_ALLOW_ALL = True   # 允许所有源访问
CORS_ORIGIN_WHITELIST = (       #设置白名单       CORS_ALLOWED_ORIGINS【django3.2】
    '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',
)

配置成功后，前端可以成功访问后端。

3.4 总结

浏览器对不同域之间做出的行为，对应不同的请求（简单请求和复杂请求）做出了不同的拦截方式，也就解释了为什么要添加请求参数。
Access-Control-Allow-Origin ：为了解决域不一致的问题；
Access-Control-Allow-Methods ：为了解决PUT，DELETE等方法
Access-Control-Allow-Headers：为了解决JSON数据传输的问题

Ri0n
关注
  • 22
    点赞
  • 踩
  • 55
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Django解决ajax跨域访问问题
01-21
这篇文章主要给大家介绍了关于Django跨域请求问题解决的相关资料，文中介绍的实现方法包括：使用django-cors-headers全局控制、使用JsonP，只能用于Get方法以及在views.py里设置响应头，只能控制单个接口，需要的...
Django中使用CORS实现跨域请求过程解析
01-20
跨域请求： 请求url包含协议、网址、端口，任何一种不同都是跨域请求。...4.添加允许访问的白名单，凡是出现在白名单的域名都可以访问后端接口 # CORS CORS_ORIGIN_WHITELIST = ( '127.0.0.1:8080',
解决django跨域问题详解
一如既往的准备文章
03-07 1957
Django跨域问题通常出现在前端和后端分离的开发场景中，当前端应用和后端Django服务部署在不同的域名或端口下时，浏览器出于安全考虑会阻止跨域请求。
Django 解决CORS跨域问题的方法
Python技术探索
07-06 5252
本文介绍了跨域问题(CORS)产生原因原理，解决思路，django服务器通过自定义中间件Middleware修改头部参数，以及使用第3方库core-headers的解决方法。
Django的跨域设置
最新发布
wyk123_046的博客
06-05 183
通过配置CORS_ORIGIN_ALLOW_ALL为True，可以允许所有的域名进行跨域访问。如果你只允许特定的域名进行跨域访问，可以将其设置为False，并在CORS_ORIGIN_WHITELIST中配置相应的域名。2.配置Django settings.py。
django跨域访问
m0_58565546的博客
08-10 324
django跨域访问
给自己的django项目配置域名
西门大盗 捉虫专家
03-30 4436
比如，现在你的django项目已经在服务器上面运行，那么如何配置一个域名，然后通过域名来访问项目呢？ 第一步：购买域名 阿里云、腾讯云等云平台都可以注册、购买域名。 购买后需要实名认证（上传身份证）、DNS解析。 .com类型的域名是在国外的不需要备案。而.cn的域名是需要国内备案的可能需要1-3天。 第二部：域名解析 域名解析：就是将你的域名与你的服务器的ip地址绑定。 可以在你的云平台上面完成。 这里以腾讯云后台的域名解析为例，在完成了以上的各个环节后，你会来到这个页面， 以上说明
Django 基础（6）-路由Routers-SimpleRouter-DefaultRouter、 action装饰器、URL路径参数
西京刀客
08-09 3000
文章目录一、路由Routers二、action装饰器视图集中附加action的声明三、路由router形成URL的方式四、总结五、参考 一、路由Routers 对于视图集ViewSet，我们除了可以自己手动指明请求方式与动作action之间的对应关系外，还可以使用Routers来帮助我们快速实现路由信息。 REST framework提供了两个router SimpleRouter DefaultRouter 使用方法: 在urls.py中定义路由 from rest_framework.route
django配置跨域
qq_45107406的博客
06-07 190
一、下载第三方组件 django-cors-headers 二、注册django-cors-headers，中间件也添加CorsMiddleware 三、配置跨域
Django 跨域请求处理的示例代码
01-21
django处理Ajax跨域访问 使用javascript进行ajax访问的时候,出现如下错误 出错原因：javascript处于安全考虑,不允许跨域访问。下图是对跨域访问的解释： 概念： 这里说的js跨域是指通过js或python在不同的域之间...
Django+vue跨域问题解决的详细步骤
12-10
1. **使用代理**：由于前端不能直接更改后端请求地址，可以通过在前端添加代理服务器来实现跨域。在Vue CLI项目中，可以在`config/index.js`文件中的`proxyTable`配置项进行设置。例如，将所有以`/api`开头的请求...
django如何允许跨域请求.docx
11-13
设置django允许跨域请求，以实现前后端的分离
Django实现跨域请求过程详解
09-18
主要介绍了Django实现跨域请求过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Django实现跨域的2种方法
12-26
jsonp 方式一：指定返回方法 # 后端 def view(request): callback = request.GET.get('callback') return HttpResponse('%s("我要上鸭王")' %(callback,)); # javascript function submitJsonp4() { $.ajax({ url: 'http://127.0.0.1:9000/xiaokai.html', type: 'GET', //写post 没有用 只能发get dataType: 'jsonp', // 伪造aja
django解决跨域请求的问题
09-19
主要介绍了django解决跨域请求的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
uwsgi+Django实现域名访问
weixin_43815091的博客
08-27 1148
说明 项目采用quasar+Django前后端分离，Django只能通过IP+端口号的方式。因为没有用https协议加密，便不太关心。 今天有功能用到定位功能，但http协议只能提供低精度定位，完全不能满足要求，于是开始升级https。第一步就是实现Django的域名访问。 Django文档中提到可以用uwsgi来映射端口给nginx，尝试过后写文档记录下来。 uwsgi安装 系统环境centos7 python3.6 pip3 install -y uwsgi 遇到报错<***.h>时，需要安
解决django跨域问题
完颜振江
03-07 468
在 Django 中解决跨域问题通常涉及到在服务器端进行配置。
Django跨域配置
subaiqiao的博客
05-23 450
Django跨域配置 setting.py中找到下述代码位置进行配置，INSTALLED_APPS和MIDDLEWARE 一定要注意添加的位置 INSTALLED_APPS = [ 'corsheaders',# 新加，注意位置 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.session
【Django】配置本地域名、解决前后端跨域问题
冰冷的希望的博客
09-01 2698
由于开发需求，我们可能会需要使用特定域名访问项目，但是当前又不方便直接上线，所以我们可以使用本地域名的方式访问，我们只需要在hosts文件里添加域名和ip即可 1.Linux 如果使用的是Linux系统，我们打开/etc/hosts文件 # 打开hosts文件 sudo vim /etc/hosts # 增加ip和域名: 127.0.0.1 www.mysite.site 保存之后退出即可 2.Windows 如果使用的是Windows系统，我们打开C:\Windows\System32\d
django的实现原理
05-05
Django是一个基于MVC（Model-View-Controller）的Web框架，它的实现原理如下： 1. 请求处理：当用户在浏览器中请求一个URL时，Django会通过URLconf（URL配置）来匹配该请求，并将请求传递给相应的视图函数进行处理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值