Trouble with nginx/CORS for Django DRF & Vue set up

Using Django
1

Hi,

I have been trying to get this set up for about two months now but keep punting because I get stuck. I am trying to get my Django DRF + Vue application deployed to production and tried two different solutions:

1) Deploying Django to a server and Vue to Netlify.
Both Django and Vue seem to be working great individually but when calling Django from Vue, I am having CORS issues (Blocked loading mixed active content “ip.address/authenticate/”)

The frontend is at https://address.work/
The backend is at http-ip.address (had to format this way because as a new user I can only post two links)

I suspect the CORS issues stem from the backend not being on SSL/https while the frontend is secured since I wasnt seeing them when both were on just http.

I tried to secure the backend but it seems like certbot/lets encrypt wont work on an IP address so I need a domain for the backend. At this point this feels like quite a bit of work just to be able to leverage Netlify.

2) Serving Django and Vue from the same Linode/DigitalOcean server.
This one seemed simple enough but I cant seem to figure out how to write the Nginx config for this. I am hopeful that someone on here can point me to the write direction since it seems like quite a few people use the JS+DRF stack.

In this case, I’d ideally have the frontend at address.work and the backend at address.work/api.

I currently have the following for serving just Django from the box.

server {
  listen 80;
  server_name 96.126.97.44;

  location = /favicon.ico { access_log off; log_not_found off; }
  location /staticfiles/ {
    root /home/development/address/django/address_app/address_app;
  }

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

In order to integrate Vue, my guesses are that I’d

  • Pointing Nginx to Vue using something like this:

    location / {
    root /home/username/yourproject/frontend/dist;
    }

  • Serving the API at /api

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

I wasn’t use what pitfalls I’d be missing using this/if this is worth pursuing over the previous method but if someone has an Nginx file that addresses this, it would be super!

2

Superficially, I don’t see anything particularly wrong with what you’ve posted.

I go a slightly different route. All my JavaScript code resides in my static directory in development, so when I do a collectstatic on the site, the code gets moved to my static root, under /static. So nginx serves my JavaScript from the same directories / paths as any other static file.

3

Regarding the CORS issue, it’s caused by the different domains being used to serve content. If you’re looking for a quick django-based solution to that problem, take a look at the django-cors-headers package.

Ken

4

Ken,

Thanks for taking a look and responding! I do have django-cors-headers added and have the setting as follows:

CORS_ORIGIN_WHITELIST = (
‘http address.work’, ‘https address.work’
)

Imagine those addresses are correct (still wont let me post links on here).

I’ll look into their docs to see if I need to do much else. The frontend and backend were talking fine before the frontend got changed to SSL.

5

Side note: If you post your text between lines of three backticks, links don’t get posted as links - they show up as regular text:

# The line above is ```
http://example.com/ok
# The line below is ```
6

Thanks, that’s vital info for me as a newbie here

7

I ended up pursuing option 1 as outlined in my original post. Once I purchased a domain name for the backend and set up SSL for it, it was good to go! Frontend and backend are communicating fine now.

1 Like