Cross-Origin Request Blocked: The Same Origin Policy Disallows reading the remote resource... (Reason: CORS did not succeed)

Question

I am currently trying to Deploy the following stack: React, Django, Nginx, and Docker.

I have spent countless hours trying to debug with no success. I have tried looking at the following resources:

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/

and many more...

I am running into the following CORS error:

Cross-Origin Request Blocked: The Same Origin Policy Disallows reading the remote resource at http://127.0.0.1:8000/api/token. (Reason: CORS did not succeed)

I am confused as to how to fix this or what the issue might be because this message doesn't really tell you what is wrong with your request like some of the other CORS messages do. For example:

"missing header Access-Control-Allow-Origin"

I believe this to be an issue with my implementation of NGINX, but I may be completely wrong. I am sending all requests to 192.168.100.6:80

The requests to my API work perfectly from my host computer (using internal IP: 192.168.100.6), but start failing with a CORS error when requesting from another computer within my same network. (I have port forwarded all relevant ports).

The networking debugging shows me that my preflight request seems to be failing. These are the request headers being sent in it:

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

These are my settings for 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;

    }
}

These are my Django Settings:

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',
    ...
]

I appreciate any resources I could look at or any help. I am just genuinely confused with why I am getting this CORS error.

Answer 1

So after a lot of troubleshooting and help from commenters, I have arrived to the solution to my specific problem. My proxy was in fact doing what it needed to do. I tested requesting to it via Postman, as suggested by @DariusV.

The mozilla failed request message itself made me believe it was a CORS error when all that was actually happening was just a failed request to 127.0.0.1 rather than the propper IP (192.168.100.6).

What actually happened is that all of my codebase was correct, but for some reason,

docker-compose build

or even:

docker-compose build --no-cache

was not updating my code changes (it was still sending requests to the ip I was using in development).

The answer that I arrived to was to do:

docker volume prune "my-nginx-volume"

and then rebuilding through docker-compose. Just a reminder that this prune command completely erases the selected container. If anyone else reading wishes to add to this solution, feel free to do so. Thanks everyone!