### 解决 Django 中 Axios 请求的跨域问题 在 Django 中处理 Axios 的跨域请求，通常可以通过引入 `django-cors-headers` 库来实现。以下是具体的解决方案： #### 安装依赖 首先，在项目环境中安装 `django-cors-headers` 库： ```bash pip install django-cors-headers ``` #### 配置中间件 将 `CorsMiddleware` 添加到项目的 `MIDDLEWARE` 设置中，并确保它位于 `CommonMiddleware` 之前[^1]: ```python MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # 添加此行 'django.middleware.common.CommonMiddleware', ... ] ``` #### 配置 CORS 头部 通过设置 `settings.py` 文件中的参数，定义哪些源可以访问 API 数据。例如，允许所有来源的请求（仅用于开发环境）： ```python CORS_ALLOW_ALL_ORIGINS = True # 开发环境下可启用此项 ``` 如果需要指定特定的来源，则使用以下配置： ```python CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # React 或 Vue 前端运行的地址 "http://127.0.0.1:3000", ] ``` 对于更复杂的场景，还可以自定义 CORS 行为。例如，允许携带 Cookie 和认证信息的跨域请求： ```python CORS_ALLOW_CREDENTIALS = True # 允许带凭证的请求 CORS_ALLOW_HEADERS = ['*'] # 允许所有的头部字段 ``` #### 验证 Axios 配置 前端部分需正确配置 Axios，默认情况下应包含以下选项以支持跨域请求并传递身份验证数据[^4]: ```javascript import axios from "axios"; // 配置全局默认值 axios.defaults.baseURL = "http://127.0.0.1:8000"; // 后端接口地址 axios.defaults.withCredentials = true; // 支持跨域时发送 Cookies axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest"; axios.defaults.headers.post["Content-Type"] = "application/json"; ``` #### 测试跨域功能 完成上述配置后，可通过浏览器开发者工具检查网络请求的状态码和响应头是否正常。具体来说，观察以下几个方面： - **Request Headers**: 确认 Origin 是否匹配预期的客户端地址。 - **Response Headers**: 检查服务器返回的 CORS 相关头，如 `Access-Control-Allow-Origin`。 --- ### 示例代码总结 **Django settings.py** ```python INSTALLED_APPS = [ ..., 'corsheaders', # 注册应用 ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # 插入中间件 'django.middleware.common.CommonMiddleware', ... ] CORS_ALLOW_ALL_ORIGINS = False # 关闭全量开放 CORS_ALLOWED_ORIGINS = ["http://localhost:3000"] CORS_ALLOW_CREDENTIALS = True # 支持带凭证的请求 ``` **Axios 配置 (JavaScript)** ```javascript import axios from "axios"; axios.defaults.baseURL = "http://127.0.0.1:8000"; axios.defaults.withCredentials = true; axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest"; axios.defaults.headers.post["Content-Type"] = "application/json"; ``` ---