Django CORS配置实战：解决跨域资源共享问题

Django CORS配置实战：解决跨域资源共享问题

在现代Web开发中，跨域资源共享（CORS）是一个常见问题，特别是当你需要从前端应用程序（例如React, Vue.js或Angular）访问不同域名或端口上的Django后端API时。幸运的是，Django提供了一个强大的工具django-cors-headers来帮助我们轻松解决这个问题。

场景示例

假设你正在开发一个博客网站，前端使用React构建，部署在http://localhost:3000，而后端API使用Django构建，运行在http://localhost:8000。当你尝试从前端发送请求到后端API时，浏览器会阻止该请求，因为它违反了同源策略。

使用django-cors-headers解决跨域问题

django-cors-headers通过处理HTTP头部信息，使得跨域请求变得合法。以下是使用django-cors-headers解决上述场景的步骤：

**1. 安装django-cors-headers**shellpip install django-cors-headers

2. 配置 Django 项目

在你的 Django 项目的 settings.py 文件中，进行以下配置：

• 将 'corsheaders' 添加到 INSTALLED_APPS：pythonINSTALLED_APPS = [ # ... 你的其他应用 ... 'corsheaders', # ...]

• 将 'corsheaders.middleware.CorsMiddleware' 添加到 MIDDLEWARE，并确保它在 django.middleware.common.CommonMiddleware 之前：pythonMIDDLEWARE = [ # ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', # ...]

• 配置允许跨域请求的域名。在settings.py 中添加 CORS_ALLOWED_ORIGINS 设置：pythonCORS_ALLOWED_ORIGINS = [ 'http://localhost:3000', # 允许来自你 React 应用的请求]

3. 创建视图并测试

为了演示，我们创建一个简单的API视图，返回一些数据：pythonfrom django.views.decorators.csrf import csrf_exemptfrom django.http import JsonResponse

@csrf_exemptdef data_view(request): data = { 'message': '来自API的数据', 'data': ['item1', 'item2', 'item3'], } return JsonResponse(data)

将该视图配置到你的URL中，例如 /api/data/。现在，你可以尝试从你的React应用中发送请求到 /api/data/，浏览器将不再阻止该请求。

更多配置选项

django-cors-headers提供了许多配置选项，允许你精细控制CORS行为。例如，你可以配置允许的请求方法 (CORS_ALLOW_METHODS)、允许的自定义头部字段 (CORS_ALLOW_HEADERS) 等等。

总结

使用django-cors-headers可以轻松解决Django项目中的跨域问题，确保你的前端应用能够安全地访问后端API。通过以上步骤和示例，你可以快速上手并配置CORS，提高你的开发效率。