Django 跨域配置

使用flutter开发webApp,后台使用Django,遇到跨域访问问题,记录一下。

Django自身不直接支持CORS,因此需要使用第三方库来处理跨域请求。最常用的库有django-cors-headers。

安装django-cors-headers

首先,你需要安装django-cors-headers。可以使用pip来安装:

pip install django-cors-headers

配置django-cors-headers

添加到INSTALLED_APPS

在你的Django项目的settings.py文件中,确保'corsheaders'在INSTALLED_APPS列表中,并且位于'django.middleware.common.CommonMiddleware'之上(或者在MIDDLEWARE设置中,如果使用的是Django 2.0及以上版本):

INSTALLED_APPS = [
    # 确保 corsheaders 在 django.middleware.common.CommonMiddleware 之前
    'corsheaders',
    ...
]

对于Django 2.0及以上版本,应该在MIDDLEWARE设置中这样配置:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

配置CORS_ALLOWED_ORIGINS

在settings.py中添加CORS_ALLOWED_ORIGINS来指定哪些源可以访问你的API。例如:

CORS_ALLOWED_ORIGINS = [
    "https://example.com",
    "https://sub.example.com",
    "http://localhost:8000",
    "http://127.0.0.1:9000",
]

可选配置

你可以根据需要配置其他CORS相关的设置,例如:

CORS_ALLOW_METHODS: 允许的HTTP方法列表。
CORS_ALLOW_HEADERS: 允许的HTTP头列表。
CORS_ALLOW_CREDENTIALS: 是否允许发送Cookie。默认为False。
CORS_EXPOSE_HEADERS: 指定哪些响应头可以被浏览器访问。

示例:

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)
CORS_ALLOW_CREDENTIALS = True
CORS_EXPOSE_HEADERS = ('content-type',)

注意事项

确保在开发环境中正确设置了DEBUG和CORS_ALLOWED_ORIGINS,以避免在生产环境中暴露敏感数据

在生产环境中,通常只允许特定的、可信的源访问你的API。

对于某些特定的需求,你可能还需要在视图函数中手动设置响应头,比如使用django.http.JsonResponse时设置Content-Type和Access-Control-Allow-Origin等。不过,通常使用django-cors-headers已经足够。
如果你的API使用了CSRF保护(默认情况下Django的表单和某些视图需要CSRF令牌),确保你的前端发送请求时包含了正确的CSRF令牌,或者你的API视图使用了@csrf_exempt装饰器(但这通常不推荐,因为它降低了安全性)。对于AJAX请求,你可以在前端手动发送CSRF令牌或在后端为特定的视图禁用CSRF保护。例如:

from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse
@csrf_exempt
def my_view(request):
    return JsonResponse({'message': 'This is a CORS example.'})

但在大多数情况下,使用CORS headers就足够了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容