如何解决 Django Rest + Vue.js + Axios 中的 CSRF 问题？

2024-03-11 01:39:58

使用 Django Rest + Vue.js + Axios 解决 CSRF 问题

引言

跨域请求伪造（CSRF）是一种常见的网络攻击，可能会给你的 Web 应用程序带来重大风险。当你使用 Django Rest Framework 与 Vue.js 和 Axios 一起开发应用程序时，CSRF 保护至关重要，以防止此类攻击。本文旨在帮助你了解 CSRF 问题的根源，并提供分步指南来解决它。

CSRF 的理解

CSRF 攻击利用受害者的会话 cookie 来向目标网站发送恶意请求。这些请求可以以受害者的身份执行，从而导致数据盗窃、更改或其他恶意操作。

Django 中的 CSRF 保护

Django 提供了内置的 CSRF 保护机制，通过要求请求包含一个 CSRF 令牌来防止此类攻击。该令牌在会话开始时生成，并存储在 cookie 和前端标头中。在提交表单或执行其他敏感操作时，Django 将验证传入请求中的令牌，以确保它与存储的令牌匹配。如果不匹配，Django 将拒绝该请求。

Vue.js 中的 Axios

Axios 是 Vue.js 的一个流行 HTTP 库，它提供了简化 HTTP 请求的 API。它还包括内置的 CSRF 保护功能，可自动在请求中包含 CSRF 令牌。

解决 CSRF 问题

要解决 "CSRF Failed: CSRF token missing" 错误，请按照以下步骤操作：

确保 CORS 配置正确： 启用 Django 中的跨域资源共享 (CORS)，以允许 Vue.js 应用程序从不同域向 Django API 发出请求。
检查 CSRF 设置： 验证 Django 设置文件中的 CSRF 相关设置是否正确。确保 CSRF_COOKIE_NAME 和 CSRF_HEADER_NAME 设置与 Vue.js 应用程序中使用的值匹配。
检查 Cookie 域： 确保 Django 和 Vue.js 应用程序使用相同的 cookie 域。如果 cookie 域不同，Vue.js 将无法访问 Django 设置的 CSRF cookie。
使用 {% csrf_token %} 模板标签： 在 Django 模板中使用 {% csrf_token %} 模板标签，以在表单中自动包含 CSRF 令牌。
启用隐式 CSRF 令牌： 在 Django 设置中启用隐式 CSRF 令牌，以允许在 AJAX 请求中使用令牌。这可以通过设置 CSRF_USE_SESSIONS 为 False 来完成。