跨域问题与Django解决方案:深入解析跨域原理、请求处理与CSRF防护

系列文章目录


文章目录


前言

跨域问题在Web开发中如影随形,而Django框架为我们提供了解决方案。本文将解析跨域原理,并介绍Django中处理跨域请求与CSRF防护的策略,助您轻松应对挑战。

跨域报错:Access to XMLHttpRequest at 'http://127.0.0.1:8000/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

一、为什么会出现跨域?

出于浏览器的同源策略限制。
同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略 ,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略 的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)

二、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url 被请求页面url 是否跨域 原因
http://www.baidu.com http://www.baidu.com/index.html 同源(协议、域名、端口号相同)
http://www.baidu.com https://www.baidu.com/index.html 跨域 协议不同(http / https)
http://www.baidu.com http://www.google.com 跨域 主域名不同(baidu / google)
http://www.baidu.com http://blog.baidu.com 跨域 子域名不同(www / blog)
http://www.baidu.com: 8080/ http://www.baidu.com:8888/ 跨域 端口号不同(8080 / 8888)

三、跨域请求解决办法(Django)

3.1 安装第三方扩展:

bash 复制代码
pip install django-cors-headers

3.2 添加应用:

bash 复制代码
INSTALLED_APPS = (
 ...
 'corsheaders',
 ...
 )

3.3 添加中间件:

注意放在第一条,第一时间进行处理:

bash. 复制代码
# settings.py
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
  ...
]

3.4 配置访问规则或白名单:

bash 复制代码
# settings.py
允许所有域名跨域(优先选择)
CORS_ORIGIN_ALLOW_ALL = True

# 配置白名单
# CORS_ORIGIN_WHITELIST = (
#     '*'
#     # '127.0.0.1:8000',
#     # 'localhost:8000',
#     # '127.0.0.1:8080',
#     # 'localhost:8080',
#'ads-cms-api.aataotao.com:8000'
#'taoduoduo-test.oss-cn-#shenzhen.aliyuncs.com:80',  # 线上
# #'10.0.2.187:8080'  # 本地

3.5 允许携带Cookie:

bash 复制代码
CORS_ALLOW_CREDENTIALS = True

3.6 js配置允许携带Cookie

另:在 Django Web中 解决CSRF

在前端即templates中的html页面中添加 {% csrf_token %}
例如:login.html

html 复制代码
<form action="http://127.0.0.1:8000/login/" method="post">
	{% csrf_token %}
    <input type="text" name="user" placeholder="username" class="input-item">
    <input type="text" name="phone" placeholder="phone" class="input-item">
    <input type="password" name="password" placeholder="password" class="input-item">
    <input type="submit" class="btn" value="login">
</form>
相关推荐
亿牛云爬虫专家13 分钟前
Kubernetes下的分布式采集系统设计与实战:趋势监测失效引发的架构进化
分布式·python·架构·kubernetes·爬虫代理·监测·采集
蹦蹦跳跳真可爱5894 小时前
Python----OpenCV(图像増强——高通滤波(索贝尔算子、沙尔算子、拉普拉斯算子),图像浮雕与特效处理)
人工智能·python·opencv·计算机视觉
nananaij4 小时前
【Python进阶篇 面向对象程序设计(3) 继承】
开发语言·python·神经网络·pycharm
雷羿 LexChien4 小时前
从 Prompt 管理到人格稳定:探索 Cursor AI 编辑器如何赋能 Prompt 工程与人格风格设计(上)
人工智能·python·llm·编辑器·prompt
敲键盘的小夜猫5 小时前
LLM复杂记忆存储-多会话隔离案例实战
人工智能·python·langchain
高压锅_12205 小时前
Django Channels WebSocket实时通信实战:从聊天功能到消息推送
python·websocket·django
胖达不服输7 小时前
「日拱一码」020 机器学习——数据处理
人工智能·python·机器学习·数据处理
吴佳浩7 小时前
Python入门指南-番外-LLM-Fingerprint(大语言模型指纹):从技术视角看AI开源生态的边界与挑战
python·llm·mcp
吴佳浩8 小时前
Python入门指南-AI模型相似性检测方法:技术原理与实现
人工智能·python·llm
叶 落8 小时前
计算阶梯电费
python·python 基础·python 入门