django - 跨域请求被阻止：同源策略不允许读取远程资源...（原因：CORS 未成功）

问题描述

我目前正在尝试部署以下堆栈： React、Django、Nginx 和 Docker。

我花了无数个小时试图调试但没有成功。我尝试查看以下资源：

还有很多...

我遇到了以下 CORS 错误：

跨域请求被阻止：同源策略不允许在http://127.0.0.1:8000/api/token读取远程资源。（原因：CORS 没有成功）

我对如何解决此问题或问题可能是什么感到困惑，因为此消息并没有像其他一些 CORS 消息那样真正告诉您您的请求有什么问题。例如：

“缺少标题访问控制允许来源”

我相信这是我实现 NGINX 的一个问题，但我可能完全错了。我将所有请求发送到 192.168.100.6:80

对我的 API 的请求可以从我的主机完美运行（使用内部 IP：192.168.100.6），但是当从我的同一网络中的另一台计算机请求时开始失败并出现 CORS 错误。（我已转发所有相关端口）。

网络调试显示我的预检请求似乎失败了。这些是在其中发送的请求标头：

选项：

Accept /
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Access-Control-Request-Headers content-type
Access-Control-Request-Method POST
Connection keep-alive
Host 127.0.0.1:8000
Origin http://192.168.100.6
Referer http://192.168.100.6/
Sec-Fetch-Dest empty
Sec-Fetch-Mode cors
Sec-Fetch-Site cross-site
User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:92.0) Gecko/20100101 Firefox/92.0

邮政：

Accept application/json, text/plain, /
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Connection keep-alive
Content-Length 29
Content-Type application/json;charset=utf-8
Host 127.0.0.1:8000
Origin http://192.168.100.6
Referer http://192.168.100.6/
Sec-Fetch-Dest empty
Sec-Fetch-Mode cors
Sec-Fetch-Site cross-site
User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:92.0) Gecko/20100101 Firefox/92.0

这些是我对 nginx-proxy.conf 的设置：

  upstream api {
    server backend:8000;
}


server {
    server_name _;
    listen 8080;


    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT,";
    add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
    add_header Access-Control-Expose-Headers "Content-Length,Content-Range";
    add_header Access-Control-Max-Age 1728000;
    # ignore cache frontend
    

    location ~* (service-worker\.js)$ {
        expires off;
        proxy_no_cache 1;
    }

    location / {
        root /var/www/react-frontend;
        try_files $uri $uri/ /index.html;
    }

    location /api/{  
        proxy_pass http://api$request_uri/;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_redirect off;

    }
}

这些是我的 Django 设置：

DEBUG = False

#ALLOWED CONNECTIONS:
ALLOWED_HOSTS = ['*']
CORS_ORIGIN_ALLOW_ALL = True


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    #Django Apps:
    'authentication',

    #Packages:
    'rest_framework',
    'corsheaders',
]

#Cors middleware set as first
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

我感谢我可以查看的任何资源或任何帮助。我真的很困惑为什么我会收到这个 CORS 错误。

标签： djangonginx

因此，经过大量故障排除和评论者的帮助，我已经找到了针对我的具体问题的解决方案。我的代理实际上正在做它需要做的事情。正如@DariusV 所建议的，我测试了通过邮递员向它发出的请求。

Mozilla 请求失败消息本身让我相信这是一个 CORS 错误，而实际发生的只是对 127.0.0.1 的失败请求，而不是对正确 IP (192.168.100.6) 的请求。

实际发生的是我所有的代码库都是正确的，但出于某种原因，

docker-compose 构建

甚至：

docker-compose build --no-cache

没有更新我的代码更改（它仍在向我在开发中使用的 ip 发送请求）。

我得到的答案是：

docker 卷修剪“我的 nginx 卷”

然后通过 docker-compose 重建。只是提醒一下，此修剪命令会完全擦除选定的容器。如果其他阅读者希望添加到此解决方案中，请随时这样做。感谢大家！

django - 跨域请求被阻止：同源策略不允许读取远程资源...（原因：CORS 未成功）

问题描述

解决方案

推荐阅读