Django5+Vue3 系列文章

前言

此项目采用 Django 框架的 5.0.7 版本进行开发。
Django 5.0 支持的 Python 版本为 3.10、3.11 和 3.12。
CSDN 专栏链接: ~快捷传送门: 留个赞再走呗 😭! ~

前后端分离项目中的跨域请求问题

本项目采用前后端分离架构，前端与后端部署在不同端口，导致它们运行在不同的域名下。例如，前端页面通过http://127.0.0.1:5173访问，而后端服务位于http://127.0.0.1:8000。这种情况下，前端向服务器请求数据时会触发跨域请求。
跨域请求的成功与否取决于服务端设置，只有服务端明确允许，前端才能成功访问数据。
简而言之，前端与后端的交互需要服务端的跨域配置支持。

跨域请求配置

下载跨域请求工具

django-cors-headers : Django 的一个第三方库，用于处理跨域资源共享（CORS）问题

pip install django-cors-headers

image
Successfuly installdjango-cors-headers-4.4.0: 下载成功

image

settings 配置跨域请求应用

django-cors-headers 安装


# Application definition

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",

    # 安装rest_framework
    'rest_framework',
    # 安装django-cors-headers
    'corsheaders'
]

中间件配置

Tips: CorsMiddleware 应该放在尽可能优先的位置，特别是在任何可以产生响应的中间件之前，比如 Django 的 CommonMiddleware 或 Whitenoise 的 WhiteNoiseMiddleware。如果不在此之前设置，就无法在这些响应中添加 CORS 头信息。

​​​MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    # 中间件按顺序执行,一定要在CommonMiddleware前面,否则会出现跨域请求失败的问题
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    # 关闭CSRF保护
    # "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

跨域访问权限配置

Tips: 开发阶段几乎不存在安全问题,设置为 True 便于后续开发

​​# 允许所有域名跨域访问(手动添加至settings.py文件中)
CORS_ALLOW_ALL_ORIGINS = True

总结

本节详细介绍了在 Django 开发过程中遇到的跨域请求问题，并展示了相应的解决方案和配置方法。更多跨域详情请访问官方文档自行阅读 --> django-cors-headers 官方文档传送门