基于 Django + Vue3 的前后端分离架构搭建指南

发布于 2024-03-10 | 分类：全栈开发

1. 项目背景

传统的 Django 模板开发模式耦合度太高，难以维护。在本次毕设中，我采用了目前主流的前后端分离架构：后端只负责提供 API 接口，前端负责页面渲染。

2. 跨域问题 (CORS) 的解决

开发过程中遇到的最大坑就是跨域。前端在 localhost:5173，后端在 localhost:8000。

解决方案： 在 Django 中安装 django-cors-headers。

# settings.py 配置
INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 必须放在最前面
    ...
]

CORS_ALLOW_ALL_ORIGINS = True  # 开发环境允许所有
        

3. 前端 Axios 封装

为了统一处理请求和响应拦截（比如自动携带 Token），我对 Axios 进行了二次封装...

（此处省略 2000 字代码细节...）