django-配置跨域

在 Django 中实现跨域（CORS，Cross-Origin Resource Sharing）需要进行相关配置，因为浏览器的同源策略会限制从不同源（域名、端口、协议）的资源请求。以下是在 Django 中解决跨域问题的详细步骤和方法：

一、使用 django-cors-headers 第三方库（推荐）

这是最常用的解决方案，简单且功能完善。

1. 安装库

   pip install django-cors-headers
   

2. 添加应用到 INSTALLED_APPS
   在 settings.py 中添加：

   INSTALLED_APPS = [
       # 其他应用...
       'corsheaders',
       # 你的应用...
   ]
   

3. 中间件配置
   在 MIDDLEWARE 中添加 corsheaders 的中间件，且必须放在 django.middleware.common.CommonMiddleware 之前：

   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware',  # 必须放在这里
       'django.middleware.common.CommonMiddleware',
       # 其他中间件...
   ]
   

4. 配置跨域规则（settings.py）

   • 允许所有源（开发环境使用）

     CORS_ALLOW_ALL_ORIGINS = True  # 允许所有域名访问
     

   • 允许特定源（生产环境推荐）

     CORS_ALLOWED_ORIGINS = [
         "https://example.com",
         "https://sub.example.com",
         "http://localhost:3000",  # 前端开发端口
         "http://127.0.0.1:8000",   # 本地测试
     ]
     

   • 允许携带认证信息（如 Cookie）

     CORS_ALLOW_CREDENTIALS = True  # 允许携带Cookie
     CORS_ALLOWED_ORIGINS = ["https://example.com"]  # 必须指定具体域名，不能用*
     

   • 允许特定 HTTP 方法和头部

     # 允许的请求头和方法
     CORS_ALLOW_HEADERS = [
         'accept',
         'accept-encoding',
         'authorization',
         'content-type',
         'dnt',
         'origin',
         'user-agent',
         'x-csrftoken',
         'x-requested-with',
     ]
     
     CORS_ALLOW_METHODS = [
         'DELETE',
         'GET',
         'OPTIONS',
         'PATCH',
         'POST',
         'PUT',
     ]
     

二、处理预检请求（OPTIONS）

当浏览器发送跨域请求时，会先发送一个 OPTIONS 预检请求，确认服务器是否允许该跨域操作。django-cors-headers 会自动处理预检请求，而手动配置时需要确保服务器正确响应 OPTIONS 请求。

三、生产环境注意事项

1. 不要在生产环境使用 CORS_ALLOW_ALL_ORIGINS = True，这会暴露接口安全风险，应指定具体允许的域名。

2. 如果需要携带 Cookie（如用户认证），必须满足：

   • CORS_ALLOW_CREDENTIALS = True
   • CORS_ALLOWED_ORIGINS 不能使用 *，必须指定具体域名。

3. 结合 Nginx 等反向代理服务器时，也可在 Nginx 配置中添加跨域头（推荐与 Django 配置结合使用）：

   location /api/ {
       proxy_pass http://your_django_server:8000;
       proxy_set_header Access-Control-Allow-Origin "https://example.com";
       proxy_set_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
       # 其他代理配置...
   }
   

四、测试跨域是否生效

可以通过前端发送跨域请求（如使用 React、Vue 或 Postman）测试，查看浏览器控制台是否有跨域错误，或服务器日志是否正确返回跨域头。