Nginx CORS 与 Angular

Question

所以我这几天一直在拔头发。 我有一个后端服务器，使用 Nginx、Gunicorn 和 Django。我将它用作 REST 服务器，使用 Django Rest Framework，并使用带有 Django Rest Auth 的令牌身份验证。此服务器的地址是 api.dev.mysite.com

这个服务器是使用 AngularJS 从前端接口调用的，也由 Nginx 处理，地址为 dev.mysite.com

一切都在本地运行，正如您所见，这两个域是不同的。每当我尝试从前端向后端发出请求时，都会收到以下错误：

Failed to load resource: Origin https://dev.mysite.com is not allowed by Access-Control-Allow-Origin.

我知道你的想法：简单，只需将add_header 'Access-Control-Allow-Origin' 'http://dev.mysite.com'; 添加到后端的nginx.conf 文件中，一切都会正常运行，例如here. 或here.

但事实并非如此。我尝试了一切，将其移动到不同的位置，放置“*”而不是地址，启用和禁用 SSL ...... 唯一有效的是当我在浏览器中手动禁用跨域限制时。最好的部分是，当我禁用这些限制时，我可以在浏览器的调试控制台中看到 Access-Control-Allow-Origin 标头设置为 http://dev.mysite.com！

知道可能出了什么问题吗？

这是我的nginx.conf 文件：

worker_processes 1;

user me staff;
error_log /tmp/nginx.error.log;

events {
  worker_connections 1024; # increase if you have lots of clients
  accept_mutex off; # set to 'on' if nginx worker_processes > 1
}

http {
  include mime.types;
  default_type application/octet-stream;
  access_log /tmp/nginx.access.log;
  sendfile on;

  upstream app_server {
    # for UNIX domain socket setups
     server unix:/tmp/gunicorn.sock fail_timeout=0;
  }

  # Common SSL Settings
  ssl_session_cache shared:SSL:10m;
  ssl_session_timeout 10m;

  ssl_prefer_server_ciphers on;
  ssl_ciphers ALL:!ADH:!EXP:!LOW:!RC2:!3DES:!SEED:!RC4:+HIGH:+MEDIUM:!kEDH;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

  server {
    # if no Host match, close the connection to prevent host spoofing
     listen 80 default_server;
     return 444;
  }

  server {
     listen 443 ssl;
     server_name api.dev.mysite.com;

     # Self-signed certificate.
     ssl_certificate ssl/nginx-selfsigned.crt;
     ssl_certificate_key ssl/nginx-selfsigned.key;

     access_log /tmp/api.dev.intelligence.access.log;
     error_log /tmp/api.dev.intelligence.error.log;

     location / {
        add_header 'Access-Control-Allow-Origin' 'https://dev.mysite.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept-Encoding';

        if ($request_method = 'OPTIONS') {
          add_header 'Access-Control-Max-Age' 1728000;
          add_header 'Content-Type' 'text/plain charset=UTF-8';
          add_header 'Content-Length' 0;
          return 204;
        }

        proxy_pass http://127.0.0.1:9000;
        proxy_set_header    Host            $host;
        proxy_set_header    X-Real-IP       $remote_addr;
        proxy_set_header    X-Forwarded-for $remote_addr;
        proxy_set_header    X-Forwarded-Protocol $scheme;
      }
  }

  server {
    client_max_body_size 4G;

    # Self-signed certificate.
    ssl_certificate ssl/nginx-selfsigned-front.crt;
    ssl_certificate_key ssl/nginx-selfsigned-front.key;

    # Listen on 80 and 443
    listen 80;
    listen 443 ssl;
    listen [::]:443 ssl;

    # set the correct host(s) for your site
    server_name dev.mysite.com;

    # Redirect all non-SSL traffic to SSL.
    if ($ssl_protocol = "") {
      rewrite ^ https://$host$request_uri? permanent;
    }

    keepalive_timeout 5;

    access_log /tmp/dev.intelligence.access.log;
    error_log /tmp/dev.intelligence.error.log;

    location / {
        root /path/to/app/current/;
        index index.html index.htm;   
    }

    error_page 500 502 503 504 /500.html;
    location = /500.html {
      root /path/to/app/current/public;
    }
  }
}

Answer 1

好的，所以我找到了解决问题的方法。我做了三件事：

1. 从我的nginx.conf 文件中删除所有“add_header”行。现在看起来像这样：

   location / {
       proxy_pass http://127.0.0.1:9000;
       proxy_set_header    Host            $host;
       proxy_set_header    X-Real-IP       $remote_addr;
       proxy_set_header    X-Forwarded-for $remote_addr;
       proxy_set_header    X-Forwarded-Protocol $scheme;
   }
   

2. 安装 Django Cors 标头，并将以下行添加到我的 settings.py:

   CORS_ORIGIN_ALLOW_ALL = False
   CORS_ALLOW_CREDENTIALS = True
   CORS_ORIGIN_WHITELIST = (
       'dev.myapp.com'
   )
   

3. 在我的 Angular 中的 .config 文件中添加了以下几行：

   $httpProvider.defaults.useXDomain = true;
   $httpProvider.defaults.withCredentials = true;
   delete $httpProvider.defaults.headers.common['X-Requested-With'];
   

   我分别尝试了所有这些东西，但我想这三个都需要。