AngularJS + Django Rest Framework + CORS（CSRF Cookie 未显示在客户端中）

AngularJS

AngularJS + Django Rest Framework + CORS（CSRF Cookie 未显示在客户端中）

在现代的Web开发中，前后端分离的架构越来越受欢迎。AngularJS 是一个流行的JavaScript框架，用于构建动态的单页应用程序。Django Rest Framework 是一个强大的Python框架，用于构建RESTful API。而CORS（跨域资源共享）是一种机制，允许在不同域名下的客户端和服务器之间进行跨域通信。

然而，当我们使用AngularJS 和 Django Rest Framework 构建应用时，可能会遇到一个问题，即CSRF（跨站请求伪造）Cookie无法在客户端中显示。这是因为默认情况下，Django Rest Framework 不会在响应中返回CSRF Cookie。

为了解决这个问题，我们可以在Django Rest Framework 的视图中添加CORS的支持。首先，我们需要安装 Django-cors-headers 库。可以通过运行以下命令来安装：

bash
pip install Django-cors-headers

安装完成后，我们需要在Django的 settings.py 文件中进行配置。在 INSTALLED_APPS 中添加 corsheaders，并在 MIDDLEWARE 中添加 CorsMiddleware，如下所示：

Python
INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

接下来，我们还需要在 settings.py 文件中添加以下配置：

Python
CORS_ORIGIN_ALLOW_ALL = True

通过设置 CORS_ORIGIN_ALLOW_ALL 为 True，我们允许任何域名的请求都能够进行跨域访问。如果你想限制访问，可以设置为 False，并在 CORS_ORIGIN_WHITELIST 中指定允许的域名列表。

配置完成后，我们需要重新启动Django服务器，以使配置生效。

现在，当我们使用AngularJS 发起请求时，CSRF Cookie 将会正常显示在客户端中，从而避免了CSRF相关的问题。

案例代码

下面是一个简单的示例，演示了如何在AngularJS 和 Django Rest Framework 中使用CORS。

在前端（AngularJS）中，我们可以使用 $http 服务发送跨域请求。假设我们有一个按钮，点击该按钮将向Django Rest Framework 的API发送POST请求。

Javascript
angular.module('myApp', [])
  .controller('myController', function($scope, $http) {
    $scope.sendRequest = function() {
      $http({
        method: 'POST',
        url: 'http://example.com/api/',
        data: { message: 'Hello, Django!' }
      }).then(function(response) {
        console.log(response.data);
      }, function(error) {
        console.log(error);
      });
    };
  });

在后端（Django Rest Framework）中，我们需要创建一个用于处理POST请求的视图。首先，我们需要安装 Django-cors-headers 库，并进行相应的配置。然后，创建一个视图，并使用 @api_view 装饰器将其标记为API视图。

Python
from rest_framework.decorators import api_view
from rest_framework.response import Response
@api_view(['POST'])
def my_api_view(request):
    message = request.data.get('message')
    return Response({'message': message})

最后，我们需要在 urls.py 文件中添加一个URL模式，将请求映射到我们的API视图。

Python
from Django.urls import path
from .views import my_api_view
urlpatterns = [
    path('api/', my_api_view),
]

通过以上的配置，我们可以在AngularJS 中发送跨域请求，并在Django Rest Framework 的API中处理该请求，从而实现前后端的通信。

通过使用AngularJS 和 Django Rest Framework 构建应用时，我们可能会遇到CSRF Cookie未显示在客户端中的问题。通过添加CORS的支持，我们可以解决这个问题，并实现安全的跨域通信。以上示例代码演示了如何在AngularJS 和 Django Rest Framework 中使用CORS进行跨域请求的处理。希望本文对你有所帮助。