Django中的跨域资源共享（CORS）|极客笔记

Django中的跨域资源共享（CORS）

Django是一个流行的Web应用程序框架，用于构建强大的网站和Web应用程序。在开发过程中，经常会涉及到跨域资源共享（CORS）的问题。本文将介绍Django中如何处理跨域请求，并解释如何使用Access-Control-Allow-Origin来实现跨域资源共享。

什么是跨域资源共享（CORS）？

跨域资源共享（CORS）是一种机制，允许Web服务器在一个域上接受来自另一个域的请求。在Web开发中，当一个网页从一个域（例如http://example.com）发起一个请求去访问另一个域（例如http://api.example.com）的资源时，就会产生跨域请求。浏览器使用CORS机制来确定是否允许跨域请求。

Django中的CORS配置

在Django中，可以使用第三方库django-cors-headers来处理跨域请求。首先需要安装该库：

pip install django-cors-headers

然后在settings.py中配置INSTALLED_APPS和MIDDLEWARE：

# settings.py

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

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

接下来，在settings.py中添加CORS配置：

# settings.py

CORS_ORIGIN_ALLOW_ALL = True

上面的配置允许所有来源的请求访问你的Django应用程序。你还可以配置允许特定来源的请求访问：

# settings.py

CORS_ORIGIN_WHITELIST = [
    'http://example.com',
    'https://example.com',
]

配置CORS实例

假设我们有一个简单的Django应用程序，包含一个视图函数返回JSON数据。我们将配置CORS来允许特定来源的请求访问该视图。

首先，创建一个Django应用程序并编写一个包含视图函数的views.py：

# views.py

from django.http import JsonResponse

def data_view(request):
    data = {'message': 'Hello, CORS!'}
    return JsonResponse(data)

然后，在urls.py中添加视图函数的URL路由：

# urls.py

from django.urls import path
from .views import data_view

urlpatterns = [
    path('data/', data_view, name='data_view')
]

最后，配置CORS允许特定来源的请求访问该视图：

# settings.py

CORS_ORIGIN_WHITELIST = [
    'http://example.com',
    'https://example.com',
]

现在，我们可以向http://example.com或https://example.com发起请求访问/data/端点，将获得来自Django应用程序的JSON数据。

运行示例

假设我们的Django应用程序运行在http://127.0.0.1:8000/地址，在views.py中的视图函数返回JSON数据，我们将通过一个简单的前端网页来演示CORS配置。

在前端项目中，创建一个HTML文件index.html：

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS Example</title>
</head>

<body>
    <div id="data"></div>

    <script>
        fetch('http://127.0.0.1:8000/data/')
            .then(response => response.json())
            .then(data => {
                document.getElementById('data').innerHTML = data.message;
            })
            .catch(error => console.error('Error:', error));
    </script>
</body>

</html>

在浏览器中打开该HTML文件，将会向http://127.0.0.1:8000/data/发起跨域请求，并将获取到JSON数据显示在页面上。