I’m hosting a React frontend app and Django backend API on Nginx in a single local Raspberry Pi, on ports 80 and 8000, respectively, with the following config:

// REACT APP
server {
        listen 80;
        listen [::]:80;

        root /link-to/build;
        index index.html;

        server_name pinode;

        location / {
                try_files $uri /index.html;
        }
}

// Django APP/Gunicorn
server {
    listen 8000;
    server_name localhost;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /link-to/myproject;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}

For my use case, I’d like all internal requests between react and django to use localhost. However, the user can access the react front end using the Raspberry Pi’s hostname (in this case, http://pinode/ as seen in nginx config above).

In react, all API calls use http://localhost:8000/api/*.

During my testing of the above, I had some level of success. However, one of the following always fails exclusively:

1. During login, I get a response from http://localhost:8000/api/login/, but the Set-Cookie fails due to Cross-Site policy.

2. Attempting to add headers to nginx backend config results in requests being rejected due to CORS policy.

3. Post requests are rejected due to a missing csrftoken, despite axios is setup with X-CSRFToken header and tested in development environment.

I didn’t seem to find a comprehensive tutorial showcasing what configuration is ideal for settings.py, axios, and nginx to make things work. Appreciate some help.