Question

我正在学习Django和Angular。

我在http://serverip:8666/athletics/

上设置了一个Django API后端

我创建了一个小型Angular应用程序，我从本地计算机上运行。

我的Angular应用程序中的以下代码：

$scope.list_athletes = function(){

    console.log('hey');

    $http
        .get('http://serverip:8666/athletics/')
        .success(function (result) {

            console.log('success');

        })

}

生成错误：

XMLHttpRequest无法加载http://serverip:8666/athletics/。没有请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“http://127.0.0.1:65356” 访问。

导致此错误的原因是什么？我如何解决它，以便我可以从我当地的Angular应用程序访问Django API？

Answer 1

您遇到的问题与未启用CORS有关。

作为一项安全政策，JavaScript可以在您的浏览器中运行时跨域发出请求。这是为了防止不受信任的代码在没有用户知识的情况下执行。解决方法是通过白名单域启用CORS。

您需要在响应中设置Access-Control-Allow-Origin响应标头，如下所示：

return Response(serializer.data, headers={'Access-Control-Allow-Origin': 'http://127.0.0.1:65356'})

这将为您的角应用启用CORS。您甚至可以将django-cors-headers添加到项目中，以便为您实现此功能。这可以添加到任何Django响应对象，例如django.http.repsonse.HttpResponse。因为您似乎正在使用DRF响应对象，所以可能需要使用类似

的内容

{{1}}

设置您的回复标题。

您还应该查看this site，了解有关如何在您的网络应用中启用CORS的更多信息。

Answer 2

您是否完成了settings.py

中的设置部分

INSTALLED_APPS = (
    'corsheaders',
)
MIDDLEWARE_CLASSES = (
    'corsheaders.middleware.CorsMiddleware',
)
CORS_ORIGIN_WHITELIST = (
  'http://127.0.0.1:65356'
)

还包括CORS_ALLOW_CREDENTIALS，CORS_ALLOW_HEADERS设置

从本地运行的Angular调用在服务器上运行的Django API

2 个答案: