Question

我正在为基于Django的应用开发一个Phonegap应用，但在尝试进行Ajax调用时，我收到了这个错误：

XMLHttpRequest cannot load http://domain.herokuapp.com/getcsrf/?tags=jquery%2Cjavascript&tagmode=any&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

我怎样才能这样做，以便我的Django应用程序允许某些网址的交叉来源？

这是我的Ajax代码：

get: function() {
    $.getJSON("http://domain.herokuapp.com/getcsrf/",
    {
        tags: "jquery,javascript",
        tagmode: "any",
        format: "json"
    },
    function(data) {
        $.each(data.items, function(item){
            console.log(item);
            });
    });
}

Answer 1

默认情况下，Django不提供提供交叉原点所必需的头文件。最简单的方法是使用这个为您处理它的Django应用程序：https://github.com/ottoyiu/django-cors-headers

然后，您可以使用设置

设置要列入白名单的域

CORS_ORIGIN_WHITELIST = (
    'google.com',
    'hostname.example.com'
)

支持允许所有，只需使用设置... CORS_ORIGIN_ALLOW_ALL = True 然后在中间件或视图中对请求进行任何过滤。

Answer 2

对于单个视图，您可以手动添加标题：

@require_GET
def api_getto(request):
    response = JsonResponse(
        # your stuff here
    )
    response["Access-Control-Allow-Origin"] = "*"
    response["Access-Control-Allow-Methods"] = "GET, OPTIONS"
    response["Access-Control-Max-Age"] = "1000"
    response["Access-Control-Allow-Headers"] = "X-Requested-With, Content-Type"
    return response

Answer 3

您可以使用“django-cors-headers”。只需使用 pip 安装即可：

    pip install django-cors-headers

向已安装的应用程序添加“corsheaders”：

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

添加中间件：

    MIDDLEWARE = [
        ...,
        'corsheaders.middleware.CorsMiddleware',
        'django.middleware.common.CommonMiddleware',
        ...,
    ]

然后将此添加到您的“settings.py”：

    CORS_ALLOWED_ORIGINS = [
        'http://siteyouwantto.allow.com',
        'http://anothersite.allow.com',
    ]

如果您还想允许某些域发出“POST”请求，请将其添加到您的“settings.py”中，并且不要忘记将其添加到“CORS_ALLOWED_ORIGINS”中。

    CSRF_TRUSTED_ORIGINS = [
        'http://siteyouwantto.allow.com',
    ]

我希望这能解决您的问题:)

Answer 4

您可以按照其他人的建议使用 django-cors-headers，在撰写本文时，您需要遵循以下所有步骤。

要在您的项目中使用 django-cors-headers，请按照 the cors headers project's README 的设置和配置部分中的指南进行操作，或者在下面阅读（为了方便，我从 README 中复制了它）。

SETUP

从 pip 安装：

python -m pip install django-cors-headers

然后将其添加到您已安装的应用中：

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

确保添加尾随逗号，否则可能会出现 ModuleNotFoundError（请参阅此博客文章）。

您还需要添加一个中间件类来监听响应：

MIDDLEWARE = [
    ...,
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...,
]

CorsMiddleware 应该放在尽可能高的位置，尤其是在任何可以生成响应的中间件之前，例如 Django 的 CommonMiddleware 或 Whitenoise 的 WhiteNoiseMiddleware。如果之前没有，它将无法将 CORS 标头添加到这些响应中。

另外，如果您使用的是 CORS_REPLACE_HTTPS_REFERER，它应该放在 Django 的 CsrfViewMiddleware 之前。

CONFIGURATION

在您的 Django 设置中配置中间件的行为。您必须至少设置以下三个设置之一：

`CORS_ALLOWED_ORIGINS`
`CORS_ALLOWED_ORIGIN_REGEXES`
`CORS_ALLOW_ALL_ORIGINS`

`CORS_ALLOWED_ORIGINS`

授权发出跨站点 HTTP 请求的源列表。默认为 []。

源由 the CORS RFC Section 3.2 定义为 URI 方案 + 主机名 + 端口，或特殊值“null”或“file://”之一。默认端口（HTTPS = 443，HTTP = 80）在这里是可选的。

特殊值 null 由浏览器在 "privacy-sensitive contexts" 中发送，例如当客户端从 file:// 域运行时。根据 this bug，某些版本的 Chrome 在 Android 上意外发送了特殊值 file://。

示例：

CORS_ALLOWED_ORIGINS = [
    "https://example.com",
    "https://sub.example.com",
    "http://localhost:8080",
    "http://127.0.0.1:9000"
]

此设置以前称为 CORS_ORIGIN_WHITELIST，它仍然用作别名，新名称优先。

`CORS_ALLOWED_ORIGIN_REGEXES`

表示与授权进行跨站点 HTTP 请求的 Origins 匹配的正则表达式的字符串列表。默认为 []。当 CORS_ALLOWED_ORIGINS 不切实际时很有用，例如当您有大量子域时。

示例：

CORS_ALLOWED_ORIGIN_REGEXES = [
    r"^https://\w+\.example\.com$",
]

此设置以前称为 CORS_ORIGIN_REGEX_WHITELIST，它仍然用作别名，新名称优先。

`CORS_ALLOW_ALL_ORIGINS`

如果 True，则允许所有来源。其他限制允许来源的设置将被忽略。默认为 False。

将此设置为 True 可能很危险，因为它允许任何网站向您的网站发出跨域请求。通常，您需要使用 CORS_ALLOWED_ORIGINS 或 CORS_ALLOWED_ORIGIN_REGEXES 来限制允许的来源列表。

此设置以前称为 CORS_ORIGIN_ALLOW_ALL，它仍然用作别名，新名称优先。

Answer 5

在我的情况下，我发布的文件超过1 mb，并且由于nginx配置（默认最大大小为1 mb）而收到此错误，因此...

对我来说nginx.conf的路径是/etc/nginx/nginx.conf。

就我而言，我刚刚在client_max_body_size中添加了http block，它对我有用

http {
    ...
    client_max_body_size 200M;
}

请确保在更改此配置后重新启动nginx

使用Phonegap访问Django应用程序中的Access-Control-Allow-Origin

5 个答案:

SETUP

CONFIGURATION

`CORS_ALLOWED_ORIGINS`

`CORS_ALLOWED_ORIGIN_REGEXES`

`CORS_ALLOW_ALL_ORIGINS`