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

Question

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

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

1. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed
2. CORS preflight response did not succeed
3. Recommendation on deploying a heavy Django + React.js web-application
4. https://pypi.org/project/django-cors-headers/

还有更多...

我遇到了以下 CORS 错误：

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

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

“缺少标题 Access-Control-Allow-Origin”

我认为这是我的 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 错误。

Answer 1

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

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

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

docker-compose 构建

甚至：

docker-compose build --no-cache

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

我得到的答案是：

docker volume prune "my-nginx-volume"

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