Cross-Origin Request Blocked: Same Origin Policy disallow re

Question

我目前正在尝试部署以下堆栈:React, Django, Nginx和Docker.

我花了无数个小时试图调试不成功。我试着看了下面的资源:

1. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed
2. CORS飞行前响应失败
3. 关于部署Django + React.js web应用的建议
4. https://pypi.org/project/django-cors-headers/

还有很多…

我遇到以下CORS错误:

Cross-Origin Request Blocked: Same Origin Policy禁止读取远端资源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修剪"my-nginx-volume">

,然后通过docker-compose重建。提醒一下，此修剪命令将完全删除所选容器。如果其他读者想要补充这个解决方案，请随意这样做。谢谢大家!