Межоригинальный запрос заблокирован: Политика одинакового происхождения запрещает чтение удаленного ресурса... (Причина: CORS не удался)

В настоящее время я пытаюсь развернуть следующий стек: 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:

Cross-Origin Request Blocked: Политика одинакового происхождения запрещает чтение удаленного ресурса по адресу 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. (Я пробросил все соответствующие порты).

Отладка сети показывает, что мой предварительный запрос, похоже, не работает. Вот заголовки запроса, отправляемые в нем:

OPTIONS:

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

POST:

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.

У меня была такая же проблема в моем проекте react.

Просто установите расширение для хрома "Moesif CORS".

После долгих поисков и помощи комментаторов я пришел к решению моей конкретной проблемы. Мой прокси действительно делал то, что должен был делать. Я протестировал запрос к нему через Postman, как предложил @DariusV.

Само сообщение mozilla о неудачном запросе заставило меня поверить, что это была ошибка CORS, в то время как все, что происходило на самом деле, это неудачный запрос на 127.0.0.1, а не на пропперный IP (192.168.100.6).

На самом деле произошло следующее: вся моя кодовая база была правильной, но по какой-то причине,

docker-compose build

или даже:

docker-compose build --no-cache

не обновлял мои изменения в коде (он по-прежнему посылал запросы на ip, который я использовал в разработке).

Ответ, к которому я пришел, был следующим:

docker volume prune "my-nginx-volume"

и затем восстанавливаем через docker-compose. Напоминаю, что команда prune полностью удаляет выбранный контейнер. Если кто-то еще хочет дополнить это решение, не стесняйтесь. Спасибо всем!

Вернуться на верх