Question

我是服务器端编程的新手，我正在尝试从后端到前端获取一些信息。如标题中所示，后端是用Django编写的。如果重要的话，前端是用React编写的。

后端有一个视图函数，该函数仅返回纯字符串：

 HttpResponse("Some useful information.")

此字符串可从以下位置获得：“ http：// localhost：8000 / info /”。我通过浏览器检查了一下，它确实有效。

因此，我正在尝试使用axios库从前端获取此字符串：

axios.get("http://localhost:8000/info/").then(res => {
    console.log(res.data);
})

当我尝试发送请求时发生错误。听起来像这样：

CORS策略已阻止从源“ http：// localhost：3006”访问“ http：// localhost：8000 / info /”处的XMLHttpRequest：不存在“ Access-Control-Allow-Origin”标头在请求的资源上。

服务器端没有错误。它返回代码200。

据我了解，数据是在前端接收的，但浏览器会阻止对它的访问，因为服务器必须另外附加一个“ Access-Control-Allow-Origin”标头。

如何从服务器发送此标头？我应该在settings.py中配置某些内容还是修改视图功能？也许还有另一种解决方案？

Answer 1

浏览器的Same Origin Policy阻止您的脚本读取数据。

要允许您实现Cross-Origin Resource Sharing。

要在Django中执行此操作，请使用django-cors-headers软件包。

Answer 2

在Django中，您可以通过在返回响应之前修改响应来设置标题。

response = HttpResponse("some useful information")
response["Access-Control-Allow-Origin"] = "http://localhost:3006"
return response

实际上，如果要发送多个视图的CORS标头，则建议使用django-cors-headers。它具有一个设置标头的中间件。

Answer 3

您的浏览器不允许Web应用程序执行对其他来源（方案，主机或端口）的请求，以此作为一种安全措施。因此，如果您的前端是从localhost：5000提供服务，则您将无法在localhost：8000上访问Django实例。

如果服务器指定Access-Control-Allow-Origin标头，则浏览器将接受这样的请求。

Django默认情况下不会添加此标头，但是您可以自己为其编写中间件，也可以使用django-cors-headers包为您完成此操作。

安装此软件包，然后将其添加到您的INSTALLED_APPS：

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

并添加其中间件：

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

然后您可以将设置中的CORS_ORIGIN_ALLOW_ALL设置为True（不建议用于生产环境）

或将CORS_ORIGIN_WHITELIST设置为['http://localhost:8000']

如何使用Django 3发送“ Access-Control-Allow-Origin”标头？

3 个答案: