React + Axios + Django前后端分离CSRF问题解决方案

本文介绍了在使用React、Axios和Django进行前后端分离开发时遇到的CSRF 403 Forbidden问题的解决方案。通过Django的@ensure_csrf_cookie修饰符发送csrftoken,并在前端使用universal-cookie库获取cookies,将csrftoken放入请求头中,解决了跨站请求伪造的问题。详细代码和步骤可在GitHub查看。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

想直接看代码的移步GitHub:

https://github.com/769484623/TestWebServer


CSRF 403 Forbidden这个问题从我刚开始做这个前端登录界面的时候就遇到了,但为了不耽误学习进度关闭了Django的CSRF验证选项。
现在快要做完了,就抽出了半天时间来解决了这个问题。
并不难其实,就是网上的资料有点不靠谱= =

Django的配置

额……虽然说是配置吧,但其实没什么说的……重点可能就是 @ensure_csrf_cookie 这个修饰符吧(一看到@我就想起来春招面试面试官问我修饰符的作用)。放个代码帮助理解下。

#url.py
urlpatterns = [
    path('Auth/', include('LoginAuth.urls')),
    path('admin/', admin.site.urls),
]
#view.py
@ensure_csrf_cookie
def login_authentication(request)<
<think>好的,用户现在想了解前后端分离和不分离项目的区别。之前他们问过零宽断言,可能是在学习编程相关的内容。现在这个问题也是技术性的,应该和Web开发有关。需要先明确用户的需求,他们可能是刚开始学习Web开发,或者在做项目时遇到了架构选择的问题,想了解两者的优缺点。 首先,用户可能不太清楚前后端分离是什么,或者听过这个术语但不太明白具体区别。需要从基础讲起,对比两种架构的不同点。可能用户需要知道在什么情况下选择哪种架构,所以得涵盖优缺点和适用场景。 接下来,要确保回答结构清晰,分点说明。比如分为核心概念、区别对比、优缺点、适用场景等部分。还要注意使用用户之前接受的格式,比如分步骤、示例和注意事项。 需要检查是否有技术术语需要进一步解释,比如MVC、API、SSR等,可能需要用简单的语言说明。同时,要举一些例子帮助理解,比如传统项目的JSP,前后端分离React+Spring Boot组合。 还要考虑用户可能的深层需求,比如性能、开发效率、维护成本等,这些都是在选择架构时的重要因素。可能需要强调前后端分离在团队协作和扩展性上的优势,而传统项目在简单场景下的快速开发。 另外,注意提到的注意事项,比如SEO问题、部署复杂度,这些都是实际开发中会遇到的问题,用户可能想知道如何解决或权衡。比如SSR或静态站点生成可以解决SEO问题,但会增加复杂度。 最后,总结部分要简明扼要,帮助用户快速做决策。需要确认覆盖了用户可能关心的所有方面,并且语言通俗易懂,避免过于技术化。</think>以下是前后端分离与传统不分离项目的对比分析,按逻辑分层说明: --- ### 一、核心概念 #### 1. **不分离项目(传统模式)** - **描述**:前端代码(HTML/CSS/JS)与后端代码(Java/PHP等)混合开发,共用同一项目结构 - **典型技术**:JSP、ASP.NET WebForms、PHP内嵌HTML - **流程**:服务器直接生成完整HTML页面返回给浏览器 #### 2. **前后端分离项目** - **描述**:前端(浏览器/App)与后端(服务器)完全独立,通过API(如RESTful)通信 - **典型技术**:React/Vue(前端) + Spring Boot/Django(后端) - **流程**:前端请求API获取数据(JSON/XML),动态渲染页面 --- ### 二、核心区别对比 | **维度** | **不分离项目** | **前后端分离项目** | |-------------------|----------------------------------|--------------------------------------| | **代码结构** | 前后端代码混编 | 前端/后端为独立项目 | | **数据传输** | 服务器返回HTML | 服务器返回JSON/XML,前端解析渲染 | | **开发协作** | 需前后端开发者紧密协调 | 通过接口文档并行开发 | | **页面渲染** | 服务端渲染(SSR) | 客户端渲染(CSR)或SSR | | **部署方式** | 整体部署 | 前端部署静态服务器,后端部署应用服务器 | | **SEO支持** | 天然支持(完整HTML直达浏览器) | 需额外处理(如SSR或预渲染) | --- ### 三、优缺点分析 #### 1. **不分离项目** - ✅ **优点**: - 开发简单,适合小型项目 - 首屏加载快(服务端渲染完成) - 天然支持SEO - ❌ **缺点**: - 前后端耦合度高,维护困难 - 无法高效支持多终端(如Web/App共用逻辑) - 前端交互复杂度受限 #### 2. **前后端分离项目** - ✅ **优点**: - 前后端解耦,独立开发/部署 - 支持多终端复用API(Web/App/小程序) - 前端可自由选型(React/Vue等) - 更易实现复杂交互(如SPA单页应用) - ❌ **缺点**: - 需额外处理SEO问题(需SSR或静态生成) - 初期架构复杂度较高 - 可能增加网络请求次数(需优化API设计) --- ### 四、典型场景选择 #### 1. **适合传统不分离模式** - 简单内容型网站(如企业官网) - 需要快速开发验证的临时项目 - 对SEO要求极高且无多终端需求 #### 2. **必须用前后端分离模式** - 多终端应用(Web+App+小程序) - 复杂交互的Web应用(如在线编辑器) - 大型长期维护项目(需团队分工协作) --- ### 五、技术栈示例 #### 1. 传统项目 ```plaintext Java(Spring MVC) + JSP + MySQL ``` #### 2. 分离项目 ```plaintext 前端:React + Axios + Webpack 后端:Spring Boot + MyBatis 通信:RESTful API(JSON格式) ``` --- ### 六、注意事项 1. **接口规范**:分离项目需严格定义API文档(如Swagger) 2. **跨域问题**:开发阶段需配置CORS,生产环境用Nginx代理 3. **性能优化**: - 前端:代码分包、CDN缓存静态资源 - 后端:API响应压缩、数据库索引优化 4. **安全风险**:分离架构需防范XSS/CSRF攻击,加强JWT令牌管理 --- ### 总结 前后端分离是现代化开发的趋势,尤其适合复杂项目和多终端场景,但需权衡开发成本和维护难度。传统模式在简单需求中仍具实用价值,选择时需结合团队能力与项目目标。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值