Межоригинальный запрос заблокирован: Политика одинакового происхождения запрещает чтение удаленного ресурса... (Причина: CORS не удался)
В настоящее время я пытаюсь развернуть следующий стек: React, Django, Nginx и Docker.
Я потратил бесчисленное количество часов на безуспешные попытки отладки. Я пробовал просматривать следующие ресурсы:
- https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed
- CORS preflight response did not succeed
- Recommendation on deploying a heavy Django + React.js web-application
- 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 полностью удаляет выбранный контейнер. Если кто-то еще хочет дополнить это решение, не стесняйтесь. Спасибо всем!