Django5+Vue3:OA系统前后端分离项目实战-跨域请求配置(2)

Django5+Vue系列文章

前言

本项目基于Django框架5.0.7版本进行开发

Django 5.0 支持的 Python 版本包括 Python 3.10、3.11 和 3.12

文章目录

目录

Django5+Vue系列文章

前言

文章目录

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

二、跨域请求配置

1.下载跨域请求工具

2.settings配置跨域请求应用

 1.django-cors-headers安装

2.中间件配置

 3.跨域访问权限配置

总结

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

本项目采用前后端分离架构，前端与后端部署在不同端口，导致它们运行在不同的域名下。例如，前端页面通过http://127.0.0.1:5173访问，而后端服务位于http://127.0.0.1:8000。这种情况下，前端向服务器请求数据时会触发跨域请求。

跨域请求的成功与否取决于服务端设置，只有服务端明确允许，前端才能成功访问数据。

简而言之，前端与后端的交互需要服务端的跨域配置支持。

二、跨域请求配置

1.下载跨域请求工具

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

代码如下（示例）：

pip install django-cors-headers

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

2.settings配置跨域请求应用

 1.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'
]

2.中间件配置

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",
]

 3.跨域访问权限配置

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

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

---

总结

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