nginx - django-cors-headers 和 nginx 配置 : preflight response missing CORS headers

Question

我使用 django-cors-headers 3.1.1 来处理我的 Django 后端和 Javascript 前端应用程序之间的请求和响应。传输是不安全的(即 http，不是 https)。

在本地托管时，一切正常。但是在服务器上部署后，我不再看到 CORS header 。

以下是开发中的 header :

并在生产中:


错误信息:

Access to XMLHttpRequest at 'http://[HOST_IP]/api/assets/' from origin 'http://my_custom_domain.eu' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我的 nginx 配置如下所示:

server {
    listen 80;
    server_name [HOST_IP];

    location / {
        include proxy_params;
        proxy_pass http://unix:/home/ubuntu/[path_to_app]/app.sock;

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, PUT, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 86400;

        if ($request_method = 'OPTIONS') {
            add_header 'Content-Type' 'text/html; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'PUT') {
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
    }

    location /static/ {
        autoindex on;
        alias /home/ubuntu/[path_to_app]/site/static/;
    }
}

django-cors-headers 的设置现在在开发和生产中是相同的:

INSTALLED_APPS = (
    …
    "corsheaders",
    …
)
MIDDLEWARE = [
    …
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    …
]
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = ['DELETE','GET','OPTIONS','PATCH','POST','PUT']

在客户端，我尝试添加“Access-Control-Request-Method”:“PUT” header ，但被浏览器拒绝。客户电话中有一个不寻常的地方:

  axios({
    method: 'put',
    url: `${this.backendUrl}/api/assets/`,
    data: formData,
    headers: {
      'Content-Type': 'application/octet-stream',
    }
  })

另外，我是第一次尝试在 Amazon AWS EC2 上托管，所以可能有一些我不知道的必需 AWS 配置。例如，是否需要使用 API 网关启用 CORS？ documentation没有这么说(‘如果您使用 API Gateway Import API，您可以使用 OpenAPI 文件设置 CORS 支持’)。

前端应用程序托管在具有以下 CORS 策略的 S3 存储桶上:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

我在这里想念什么？是否有一些需要的服务器端(尤其是 nginx)配置？

我尝试过的其他一些解决方案:

我怀疑请求/响应来源是否正确(例如 APPEND_SLASH 变量)。但是如果是这种情况，本地托管时不应该引发错误吗？

我还尝试设置代理 header ，如 this question ，但是在不太了解nginx的情况下，这注定要失败。

Answer 1

我设法通过改变三件事来解决这个问题:

AWS

我注意到 AWS documentation状态:

CORS is already enabled for the Amazon EC2 API, and is ready for you to use. You do not need to perform any additional configuration steps to start using this feature. There is no change to the way that you make calls to the Amazon EC2 API; they must still be signed with valid AWS credentials to ensure that AWS can authenticate the requestor. […]

这通常由 AWS SDK 或 CLI 处理，但在我的情况下，我没有使用它们，所以我必须添加 AWS_ACCESS_KEY_ID和 AWS_SECRET_ACCESS_KEY .就我而言，我只是使用了 aws4 library :

  axios(aws4.sign({
    accessKeyId: this.awsAccessKey,
    secretAccessKey: this.awsSecretAccessKey,
    method: 'put',
    url: `${this.backendUrl}/api/assets/`,
    data: formData,
    body: JSON.stringify(formData),
    service: 'ec2',
    region: 'eu-central-1',
    path: '/',
    headers: {
      'Content-Type': 'application/octet-stream'
    }
  }))

不过，我已经看到很多示例如何添加 AWS Signature v.4 而无需任何额外依赖。

NGINX

在 nginx 配置中，我将所有 add_headers 语句放入条件代码块中。想法来自 this post .

server {
    listen 80;
    server_name [HOST_IP];

    location / {
        include proxy_params;
        proxy_pass http://unix:/home/ubuntu/[path_to_app]/app.sock;


        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, OPTIONS, POST, DELETE';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,X-Amz-Date';
            add_header 'Access-Control-Max-Age' 86400;
            add_header 'Content-Type' 'text/html; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'PUT') {
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, OPTIONS, POST, DELETE';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,X-Amz-Date';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, OPTIONS, POST, DELETE';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,X-Amz-Date';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
    }

    location /static/ {
        autoindex on;
        alias /home/ubuntu/analizy/be/site/static/;
    }
}

Django-cors-header

在这里添加非默认标题就足够了。

from corsheaders.defaults import default_headers
CORS_ALLOW_HEADERS = list(default_headers) + [
    'X-Amz-Date',
]

希望这会对某人有所帮助。